基于webpack的可視化資源分析工具webpack-bundle-analyzer分析優(yōu)化項目資源。

安裝webpack-bundle-analyzer

控制臺輸入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())
}

在控制臺使用npm run build --report
build成功后會自動打開localhost:8888即可看到分析內(nèi)容

image.png

分析優(yōu)化方案：

• lodash
  lodash是一個javascript的實用工具庫，用來處理各種數(shù)據(jù)類型。
  下面是一段項目中用到lodash的地方，該項目只用到了它的深拷貝方法。

import  _ from 'lodash';
...
// 過濾請求參數(shù)對象中的空屬性
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;
};

然后在打包的時候會發(fā)現(xiàn)有70多kb~。
如何做到按需加載？
引入的時候import lodash+ '/'+對應(yīng)的方法名就可以了。

import cloneDeep from 'lodash/cloneDeep';

這樣lodash會減少很多體積。

• moment.js
  moment是一款javascript日期處理類庫。
  因為該項目中用到的地方不多，所以去掉了這個類庫。
  網(wǎng)上優(yōu)化的方案可以一試：

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命令裝的插件名稱，鍵值是插件對外提供的那個對象，需要查看源碼。