上节: 区分开发和生产环境
上节目录如下:
什么是代码分割
先来修改下src/index.js:
import _ from 'lodash';
_.join(['a', 'b', 'c', '-']);
这里引入lodash并调用join方法,然后安装下lodash: npm i lodash
npm run build, 可以看到lodash和业务代码都打包在一起了,并且有70kb:
这里就会有个问题,项目中会引入很多第三方库,这些库根业务无关,内容几乎是不会改变的,如果都打包到一起,那么浏览器想要看到效果就必须执行完整个超大的main.js文件,如果能把不会变动的代码(不管是第三方还是自己写的),都单独打包到一个文件,且文件名每次都一样,那么浏览器以后刷新就能直接在缓存中读取,从而提升页面性能,这就是所谓的代码分割。
手动实现代码分割
这里示范一下简单粗暴的做法,为了让大家更理解什么是代码分割
新建src/js/lodash.js
lodash.js代码如下:
import _ from 'lodash';
window._ = _;
window上挂个属性'_',值为lodash,这样index.js就不用引入了:
src/index.js:
_.join(['a', 'b', 'c', '-']);
然后把lodash.js设置为入口,webpack/webpack.base.js:
// 省略
entry: {
main: './src/index.js',
lodash: './src/js/lodash.js'
},
//省略
执行npm run build:
可以看到lodash被单独打包成了一个文件,这就是代码分割
用webpack实现代码分割
先恢复下代码,把src/js/lodash.js删了,
src/index.js如下:
import _ from 'lodash';
_.join(['a', 'b', 'c', '-']);
webpack/webpack.base.js删掉lodash入口:
// 省略
entry: './src/index.js',
//省略
这样代码就恢复了,代码分割的功能也没了。
然后在修改生产环境的配置,开启代码分割的选项
webpack/webpack.prod.js:
// 省略
module.exports = merge(baseConfig, {
mode: 'production',
output: {
filename: '[name].[contenthash:10].js'
},
devtool: 'cheap-module-source-map',
module: {
rules: [{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}]
},
plugins: [
new CleanWebpackPlugin()
],
optimization: {
// 配置代码分割
splitChunks: {
// 要分割哪些模块:all(推荐), async(默认,只分隔异步代码), and initial
chunks: 'all'
}
}
});
然后npm run build:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。