基于webpack的可视化资源分析工具webpack-bundle-analyzer分析优化项目资源。
安装webpack-bundle-analyzer
控制台输入npm/cnpm install --save-dev webpack-bundle-analyzer
- config/index中
build: {
...
bundleAnalyzerReport: process.env.npm_config_report
}
- webpack生产环境中 build/webpack.prod.conf.js文件中
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
在控制台使用npm run build --report
build成功后会自动打开localhost:8888即可看到分析内容
image.png
分析优化方案：
- lodash
lodash是一个javascript的实用工具库，用来处理各种数据类型。
下面是一段项目中用到lodash的地方，该项目只用到了它的深拷贝方法。
import _ from 'lodash';
...
// 过滤请求参数对象中的空属性
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;
};
然后在打包的时候会发现有70多kb~。
如何做到按需加载？
引入的时候import lodash+ '/'+对应的方法名就可以了。
import cloneDeep from 'lodash/cloneDeep';
这样lodash会减少很多体积。
- moment.js
moment是一款javascript日期处理类库。
因为该项目中用到的地方不多，所以去掉了这个类库。
网上优化的方案可以一试：
- 按需加载moment.js语言包，使用webpack contextReplacementPlugin
plugins: [
new webpack.ContextReplacementPlugin(
/moment[/\\]locale$/,
/zh-cn/,
),
配置只是zh-cn语言包后文件体积会明显减少，亲测有效。
- 使用date-fns,与moment相比，更为轻量化。
- vue.js
将项目中需要的一些公共依赖包，并且不常变动的，单独取出，不再每次都打包编译。如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选项。
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命令装的插件名称，键值是插件对外提供的那个对象，需要查看源码。
