webpack配置优化打包体积html-webpack-plugin中添加的参数,主要是为了动态生成index.html

没有特别高深的技术,都是使用一些工具和配置解决问题.

页面加载速度慢分析

查看network中加载慢的资源
查看nginx是否开启了gzip策略
查了vue-cli编译之后的webpack分析报告(webpack-bundle-analyzer)
减小或者分割单个大文件的体积,提升加载速度
固定的依赖可以使用cdn或者oss进一步提高加载速度,也是建立在第四步基础上
压缩图片,减小图片的体积;平衡使用url-loader的limit限制

配置webpack-bundle-analyzer,定位资源大小

// package.json
{
    "build:report": "cross-env USE_ANALYZER=true vue-cli-service build"
}

npm i webpack-bundle-analyzer -D
# OR
yarn add webpack-bundle-analyzer --dev

// vue.config.js
module.exports = {
    configChain: (config) => {
         if (process.env.USE_ANALYZER) {
              config
                  .plugin('webpack-bundle-analyzer')
                  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    	}
    }
}

# npm run build:report
# 编译之后自动打开编译报告

组件库组件按需引入

组件库(ant-design-vue)

ant-design-vue按需加载

需要注意: style的按需引入,尤其是定制主题,使用less-options的方式,不能直接引用theme/default.less

// 需要安装 npm i -D babel-plugin-import or yarn add babel-plugin-import --dev
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
module.exports = {
  plugins: ['import', {
      'libraryName': 'ant-design-vue',
      'libraryDirectory': 'es',
      'style': IS_PROD ? 'css' : true // `style: true` 会加载 less 文件
    }]
}

定制主题参考: www.antdv.com/docs/vue/cu…

在-vue-cli-3-中定制主题

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1DA57A',
          'link-color': '#1DA57A',
          'border-radius-base': '2px',
        },
        javascriptEnabled: true,
      },
    },
  },
};

@antv/icons体积

目前官方没有好的解决方法,可能需要等ant-design-vue发布v2.0才能解决.

不过提供了临时的解决方案,非常麻烦,需要自己手动穷举出ant-design-vue和自己或者其它使用到@antv/icons里面的组件,然后使用webpack的resolve.alias解决,聊胜于无,但是非常不靠谱

// vue.config.js
// @see https://github.com/ant-design/ant-design/issues/12011#issuecomment-420038579
// @see https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js
module.exports = {
    configureWebpack: {
         // 优化antdv组件库的icons体积
         resolve: {
           alias: { // icons.js中列举出所有用到的icons,参考上面链接中的文件
             '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js')
           }
         }
    } 
}

通用的package使用cdn

vue, vuex, vue-router, @antv/data-set, @antv/g2, @antv/g2plot, axios 使用cdn

webpack的externals排除需要使用cdn的package

// vue.config.js
module.exports = {
    configureWebpack: {
        externals: {
            vue: 'Vue',
            'vue-router': 'VueRouter',
            vuex: 'Vuex',
            axios: 'axios',
            '@antv/data-set': 'DataSet',
            '@antv/g2': 'G2',
            '@antv/g2plot': 'G2Plot'
        }
    }
}
注意: 
1. externals中key是package名称, value是这个package通过script标签引用之后,在window上放置的全局变量

html-webpack-plugin

vue-cli修改插件选项这里刚好有教程教你,如何给html-webpack-plugin添加options参数
public/index.html修改

html-webpack-plugin中添加的参数,主要是为了动态生成index.html时候使用,所以需要修改index.html,动态插入配置的cdn内容.

vue-cli的HTML和静态资源教程

image资源处理

可以看看这个文章 How to optimize images in webpack

image-webpack-loader插件压缩图片

// vue.config.js
module.exports = {
    configChain: (config) => {
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options()
            .end()
    }
}

注意:

压缩会影响图片质量
注意和url-loader和file-loader的配合

不同类型的图片可能有很多其他的处理插件,还需要继续研究

svg: vue-svg-icon-loader

动态ployfill

对于浏览器的ployfill,可以不使用babel在编译阶段使用core-js进行ployfill,可以使用动态的ployfill,进一步减小js文件的体积.

构建需要的es特性url

ployfill.io的url-builder

阿里也有一个线上ployfill

<!-- 参数就是你需要的特性 -->
<script src="https://polyfill.alicdn.com/polyfill.min.js?features=Promise%2CArray.prototype.includes"></script>