基于webpack的可視化資源分析工具webpack-bundle-analyzer分析優(yōu)化項(xiàng)目資源柳畔。
安裝webpack-bundle-analyzer
控制臺(tái)輸入npm/cnpm install --save-dev webpack-bundle-analyzer
- config/index中
build: {
...
bundleAnalyzerReport: process.env.npm_config_report
}
- webpack生產(chǎn)環(huán)境中 build/webpack.prod.conf.js文件中
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
在控制臺(tái)使用npm run build --report
build成功后會(huì)自動(dòng)打開localhost:8888即可看到分析內(nèi)容
image.png
分析優(yōu)化方案：
- lodash
lodash是一個(gè)javascript的實(shí)用工具庫，用來處理各種數(shù)據(jù)類型。
下面是一段項(xiàng)目中用到lodash的地方，該項(xiàng)目只用到了它的深拷貝方法宁舰。
import _ from 'lodash';
...
// 過濾請(qǐng)求參數(shù)對(duì)象中的空屬性
const apiQueryFilter = obj => {
let _obj = cloneDeep(obj);
for (let key in _obj) {
if (_obj[key] && typeof _obj[key] === 'object') {
apiQueryFilter(_obj[key]);
} else if (_obj[key] === undefined || _obj[key] === null || _obj[key] === '') {
delete _obj[key];
}
}
return _obj;
};
然后在打包的時(shí)候會(huì)發(fā)現(xiàn)有70多kb~刷晋。
如何做到按需加載？
引入的時(shí)候import lodash+ '/'+對(duì)應(yīng)的方法名就可以了听想。
import cloneDeep from 'lodash/cloneDeep';
這樣lodash會(huì)減少很多體積。
- moment.js
moment是一款javascript日期處理類庫马胧。
因?yàn)樵擁?xiàng)目中用到的地方不多汉买，所以去掉了這個(gè)類庫。
網(wǎng)上優(yōu)化的方案可以一試：
- 按需加載moment.js語言包佩脊，使用webpack contextReplacementPlugin
plugins: [
new webpack.ContextReplacementPlugin(
/moment[/\\]locale$/,
/zh-cn/,
),
配置只是zh-cn語言包后文件體積會(huì)明顯減少蛙粘，親測(cè)有效。
- 使用date-fns,與moment相比威彰，更為輕量化出牧。
- vue.js
將項(xiàng)目中需要的一些公共依賴包，并且不常變動(dòng)的歇盼，單獨(dú)取出舔痕，不再每次都打包編譯。如vue、vue-router伯复、vuex慨代、axios用cdn中的文件代替，而不是直接打包到vendor中啸如。這樣在有緩存的情況下侍匙，這些資源均走緩存，不用加載叮雳。
在入口html中引入js文件
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
去掉js的import
配置webpack.base.conf.js的externals選項(xiàng)想暗。
module.exports = {
context: path.resolve(__dirname, '../'),
entry: entry,
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
externals:{
vue: 'Vue',
axios: 'Axios',
vue-router:'VueRouter',
vuex:'_default'
},
resolve: {
extensions: ['.js', '.vue', '.json', 'ts'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'~': resolve('static'),
}
},
module: {
},
}
注意：externals中鍵名是npm install命令裝的插件名稱，鍵值是插件對(duì)外提供的那個(gè)對(duì)象帘不，需要查看源碼说莫。
