概述
最近给vue项目优化了一下资源打包,有一些心得,记录下来,供以后开发时参考,相信对其他人也有用。项目使用vue-cli搭建的,所以优化方向是基于vue-cli3的。
css按需加载
项目使用的是element ui库,我们使用了element的自定义主题。但是我看见打包的时候打包了2份element ui库的css:app.css打包了一份,vendor.css也打包了一份。严格说来,element-ui库的样式应该打包进第三方css里面也就是vendor.css里面。
查找原因,发现有如下配置:
// babel.config.js
module.exports = {
presets: [
'@vue/app',
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk',
},
],
],
};
// main.js
import '../../theme/index.css';
其中babel.config.js里面的配置是说,element-ui使用的style是element-ui库里面theme-chalk文件夹里面的样式;main.js里面的配置是说,导入自定义主题文件夹theme里面的样式。所以前者把element-ui库里面的css打包进了vendor.css,后者把自定义主题的css打包进了app.css。
最后考虑到我们的需要是一定要使用自定义主题,所以做了如下修改:
// babel.config.js
module.exports = {
presets: [
'@vue/app',
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: '~theme',
},
],
],
};
意思是,element ui库使用自定义主题theme文件夹里面的样式。所以不会再把element ui库里面的css打包进vendor.css里面了。
虽然还是有一点瑕疵,就是这样会使app.css很大,导致每次只要修改了一点点css,都要把element ui的css重新打包一次。但这也没办法,需要是一定要自定义主题。
element-ui组件按需加载
上面我们在babel.config.js里面已经配置了element ui组件的按需加载,但是在实际引入组件的时候我们引入了多余的组件,特别是time-picker和date-picker组件,占了很大体积,于是我检查了一遍,把多余的组件删除了。
这里有必要提一下的是,如果你使用的是vue-cli3,那么在package.json里面加入如下指令:
"report": "vue-cli-service build --report"
然后运行npm run report,就可以在dist文件夹里面生成一个report.html,里面非常直观的显示出打包的js的组成成分和大小,对减少打包体积很有帮助。
moment.js
通过上面的指令npm run report,我们可以看到,moment.js的打包体积非常大,都快赶上element ui整个库了。于是我想办法减少moment.js的打包体积。
通过You-Dont-Need-Momentjs可以看到好几个moment.js的替代库,但是由于它们都没有UTC的相关功能,而我们项目非常依赖moment.js的UTC功能,所以我们项目并不能采用这些替代库。
最后只能在moment.js上想办法了,只能通过删减它里面的国际化内容来减少它的打包体积了。webpack官方也建议在使用moment.js的时候用ignorePlugin删除它的国际化部分。
具体方法如下,只需要在vue.config.js里面加入下面的配置就行了:
const webpack = require('webpack');
module.exports = {
chainWebpack: config => {
config
.plugin('ignorePlugin')
.use(webpack.IgnorePlugin, [{
resourceRegExp: /^./locale$/,
contextRegExp: /moment$/,
}]);
},
}