Code Splitting in Practice - Shanghai JS Meetup May 2016
0 likes147 views
The document discusses code splitting in webpack, highlighting its benefits such as reduced file size and improved caching. It provides a configuration example that includes various plugins, including the Mill plugin for enhancing webpack's capabilities. The document also references an event organized by 'technology with impact' and links to relevant GitHub repositories.
![const webpack = require("webpack");
module.exports = {
entry: {
app: "./app.js",
vendor: ["react", “react-dom", ...],
},
output: {
filename: "[name].bundle.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor","vendor.bundle.js")
]
};](https://image.slidesharecdn.com/xeodou-js-160530101022/85/Code-Splitting-in-Practice-Shanghai-JS-Meetup-May-2016-7-320.jpg)
![MillPlugin.prototype.apply = function (compiler) {
var name = this.options.prefix + "/" + this.options.name;
compiler.plugin("compilation", function (compilation) {
compilation.mainTemplate.plugin("render", function (bootstrapSource, chunk, hash, moduleTemplate,
dependencyTemplates) {
var source = new ConcatSource();
source.add("webpackJsonp(['" + name + "'],");
var modules = compilation.mainTemplate.renderChunkModules(chunk, moduleTemplate, dependencyTemplates,
"/******/ ");
source.add(compilation.mainTemplate.applyPluginsWaterfall("modules", modules, chunk, hash,
moduleTemplate, dependencyTemplates));
source.add(")");
return source;
});
compilation.plugin("optimize-module-ids", function (modules) {
modules.forEach(function (module) {
module.id = name + (module.index > 0 ? ("/" + module.index) : '');
});
});
});
};](https://image.slidesharecdn.com/xeodou-js-160530101022/85/Code-Splitting-in-Practice-Shanghai-JS-Meetup-May-2016-9-320.jpg)
![const webpack = require('webpack');
const MillPlugin = require('webpack-mill-plugin');
module.exports = {
entry: './index',
output: {
filename: 'modern.js',
publicPath: './',
},
plugins: [
new MillPlugin('modern'),
]
};](https://image.slidesharecdn.com/xeodou-js-160530101022/85/Code-Splitting-in-Practice-Shanghai-JS-Meetup-May-2016-10-320.jpg)
![WebpackJsonp(["themes/modern"],{
"themes/modern":function(e,t,a){
"use strict";
e.exports={ }
}
})
require(`themes/${window.MillConfig.theme}`)](https://image.slidesharecdn.com/xeodou-js-160530101022/85/Code-Splitting-in-Practice-Shanghai-JS-Meetup-May-2016-11-320.jpg)
Code Splitting in Practice - Shanghai JS Meetup May 2016
- 4. Why?
- 5. Cacheable 1.Decrease the file size 2.Vendor modules 3.Most low frequency modules
- 6. How?
- 7. const webpack = require("webpack"); module.exports = { entry: { app: "./app.js", vendor: ["react", “react-dom", ...], }, output: { filename: "[name].bundle.js" }, plugins: [ new webpack.optimize.CommonsChunkPlugin("vendor","vendor.bundle.js") ] };
- 8. Advance? Can we make it better? Pluggable?
- 9. MillPlugin.prototype.apply = function (compiler) { var name = this.options.prefix + "/" + this.options.name; compiler.plugin("compilation", function (compilation) { compilation.mainTemplate.plugin("render", function (bootstrapSource, chunk, hash, moduleTemplate, dependencyTemplates) { var source = new ConcatSource(); source.add("webpackJsonp(['" + name + "'],"); var modules = compilation.mainTemplate.renderChunkModules(chunk, moduleTemplate, dependencyTemplates, "/******/ "); source.add(compilation.mainTemplate.applyPluginsWaterfall("modules", modules, chunk, hash, moduleTemplate, dependencyTemplates)); source.add(")"); return source; }); compilation.plugin("optimize-module-ids", function (modules) { modules.forEach(function (module) { module.id = name + (module.index > 0 ? ("/" + module.index) : ''); }); }); }); };
- 13. Event organised by “Technology with Impact” http://wiredcraft.com/