Code Splitting in Practice by Xeodou Li backend developer at the May 2016 Shanghai JavaScript Meetup.

2. Who Am I
Xeodou@Wiredcraft
github.com/xeodou

3. Code Splitting
In Practice

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) : '');
});
});
});
};

10. const webpack = require('webpack');
const MillPlugin = require('webpack-mill-plugin');
module.exports = {
entry: './index',
output: {
filename: 'modern.js',
publicPath: './',
},
plugins: [
new MillPlugin('modern'),
]
};

11. WebpackJsonp(["themes/modern"],{
"themes/modern":function(e,t,a){
"use strict";
e.exports={ }
}
})
require(`themes/${window.MillConfig.theme}`)

12. Mill
github.com/graffie/mill
github.com/graffie/webpack-mill-plugin

13. Event organised by
“Technology with Impact”
http://wiredcraft.com/