webpack提供require.ensure來進行異步加載(也稱為代碼分割),它會把js模塊獨立導出來生成.js文件,當我們使用到這個模塊的時候,webpack會生成script dom元素,讓瀏覽器來加載這個js文件。
使用commonsChunkPlugin
提取庫代碼:
var webpack = require('webpack');
module.exports = {
? ? entry:{
? ? ? ? index:? './index.js',????
? ????? vendor:? ['react', 'lodash']
? ? },
? ? output: {
????????path: 'lib',
? ? ? ? filename: '[name].[chunkhash].js'
????},
? ? plugins:{
? ? ? ? new webpack.outimize.commonsChunkPlugin({names:[vendor]})
????}
}??
提取公有代碼:
var webpack = require('webpack');
module.exports = {
? ? entry:? {
? ? ? ? page1: './page1.js',
? ? ? ? page2: './page2.js'
????},
? ? output: {
? ? ? ? filename: '[name].js'
????},
? ? plugins: {
? ??????new webpack.outimize.commonsChunkPlugin('common.js', ['page1', 'page2'])
????}
}
提取出來的代碼,需要先引用,然后再去引用業務代碼。