webpack打包优化

1. 包大小分析

我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析，它的应用非常简单
npm run preview -- --report执行完这个命令，我们会看到如下的页面（preview以package.json文件配置的命令为准;详见）如图所示，方块越大，说明该文件占用的文件越大，文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向，比如Xlsx文件就很大，而且这类插件长期不需要我们进行更新

2. 配置排除大文件打包

那些体积太大而且长期不会发生变化的包，我们可以通过webpack的配置进行排除，不打入最终的包里

使用方法

先找到 vue.config.js，在configureWebpack下添加 externals 让 webpack 不打包 vue xlsx 和 element

vue.config.js 复制代码

+ configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
+  externals: {
     /**
      * externals 对象属性解析：
      * '包名' : '模块内置对象'
    */
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX'
+  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }

说明：再次运行命令，我们会发现包的大小已经大幅减小

3.CDN文件配置

没有被打包的三个模块不能就不管了，项目还是需要依赖的，它们几个我们就可以采用CDN的方式引入了

CDN好处：

减少应用打包出来的包体积
加快静态资源的访问
利用浏览器缓存，不会变动的文件长期缓存

CDN地址配置：

vue.config.js 复制代码

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      // element-ui css 样式表
      'https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css' 
    ],
    js: [
      // vue must at first!
      'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
      // element-ui js
      'https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js', 
      // xlsx
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js'
    ]
  }
}

说明：根据环境变量动态设置配置

webpack配置externals配置项

vue.config.js 复制代码

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
+  externals: externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

注意⚠️：因为生产环境使用CDN方式引入Element样式，所以样式引入要在main入口排除

main.js 复制代码

import ElementUI from 'element-ui'
- import 'element-ui/lib/theme-chalk/index.css'

+ if (process.env.NODE_ENV === 'development') {
+   require('element-ui/lib/theme-chalk/index.css')
+ }

4. 注入CDN文件到页面

通过配置chainWebpack选项，借助 html-webpack-plugin注入CDN到 index.html之中:

vue.config.js 复制代码

chainWebpack(config) {
  config.plugin('preload').tap(() => [
    {
      rel: 'preload',
      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      include: 'initial'
    }
  ])
  // 注入cdn变量 (打包时会执行)
+  config.plugin('html').tap(args => {
    args[0].cdn = cdn // 配置cdn给插件
    return args
+  })
  ...
}

找到 public/index.html 通过你配置的CDN Config 依次注入 css 和 js

index.html 复制代码

<head>
  <!-- 引入样式 -->
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%=css%>">
  <% } %>
</head>

<body>   
<div id="app"></div>  
<!-- built files will be auto injected -->    
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>
  
</body>

最后，进行打包

npm run build:prod