如题,由于项目越来越大,导致js的体积也越来越大,之前没有仔细管webpack的配置,所以一般打出来的包都有app.js和vendor.js两个文件。由于功能越来越多,vendor.js文件也越来越大,达到了1mb,所以决定着手优化
通过webpack-bundle-analyzer可以看到占大头的主要是iview和tui.editor这两个
那么目标很明确了
- iview使用umd用script标签引入,可以参考官网,不再赘述
- 主要是tui.editor
首页并不需要,所以没必要放在app.js或vendor.js中进行加载,所以可以单独给他开一个cachegroup,配置如下
markdown: {
name: 'markdown',
minChunks: 1,
priority: 30,
minSize: 0,
chunks: 'all',
test(module) {
// `module.resource` contains the absolute path of the file on disk.
// Note the usage of `path.sep` instead of / or \, for cross-platform compatibility.
const editorList = ['tui', 'highlight', 'codemirror', 'markdown-it', 'plantuml-encoder', 'to-mark']
return editorList.some(v => {
return module.resource && module.resource.includes(`${path.sep}node_modules${path.sep}${v}`)
})
},
}
几个要注意的细节:
- priority要比vendor高,才能优先处理
- 将跟tui.editor有关的所有依赖都打进去(可以通过查看tui.editor的引用进入源码查看tui.editor依赖了哪些依赖)
- 将vendor的minSize设置大一些,让vendor让一些比较小的依赖包打进页面中,不用加入进vendor中
最终的cachegroups配置如下
cacheGroups: {
vendor: {
name: 'vendor',
minChunks: 2,
reuseExistingChunk: true,
priority: 20,
minSize: 300000,
chunks: 'all',
test: /[\\/]node_modules[\\/]/
},
common: {
name: 'common',
minChunks: 2,
reuseExistingChunk: true,
priority: 10,
minSize: 30000,
chunks: 'all',
test: /[\\/]src[\\/]/,
},
markdown: {
name: 'markdown',
minChunks: 1,
priority: 30,
minSize: 0,
chunks: 'all',
test(module) {
// `module.resource` contains the absolute path of the file on disk.
// Note the usage of `path.sep` instead of / or \, for cross-platform compatibility.
const editorList = ['tui', 'highlight', 'codemirror', 'markdown-it', 'plantuml-encoder', 'to-mark']
return editorList.some(v => {
return module.resource && module.resource.includes(`${path.sep}node_modules${path.sep}${v}`)
})
},
}
}