webpack打包体积优化

基于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日期处理类库。
  因为该项目中用到的地方不多，所以去掉了这个类库。
  网上优化的方案可以一试：

1. 按需加载moment.js语言包，使用webpack contextReplacementPlugin

plugins: [
  new webpack.ContextReplacementPlugin(
    /moment[/\\]locale$/,
    /zh-cn/,
  ),

配置只是zh-cn语言包后文件体积会明显减少，亲测有效。

2. 使用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命令装的插件名称，键值是插件对外提供的那个对象，需要查看源码。