VUE-CLI3项目打包配置优化

在项目开发完成后，就会进行打包部署，有的时候项目开发过程中，代码写的比较臃肿 或者各种包引用的比较多，就会造成打包后包的体积变大，导致部署后访问速度比较慢。 下面就记录下自己在项目中的一些配置来进行优化这些问题。
通过 npm run build --report 命令（好多贴中都是借助webpack-bundle-analyzer帮助分析，不用安装这个，使用前面那个自带命令就好） 会在打包后的文件夹内生成一个report.html文件，打开会就是各种打包后文件大小的分析页面，我们可以看到生成的最大文件为chunk-vendors.js

这个文件主要又由echarts、ui库、lodash、zrender组成，其中echarts、ui库（element-ui，iview-ui）、vue为我们项目开发时必要引入的文件，所以我们如果把这写文件分离出来那么文件自然就会小了很多
主要步骤是

 1.  在index.html引入cdn路径，或者下载下来放在 /static/ 目录下引入也行。
 2.  package.json 中下载的依赖包 就不需要了，删掉 ，main.js中引入的也可以注释掉了
 3.  使用 webpack 配置 externals，来分离这些文件

// 为了直观显示  我这里是注释掉了
// import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import ViewUI from 'view-design'
// import 'view-design/dist/styles/iview.css'

Vue.prototype.$http = axios
Vue.prototype.$bus = new Vue();
Vue.config.productionTip = false

// Vue.use(ViewUI)
Vue.use(VueClipboard)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

  // vue.config.js中
 configureWebpack: {
    externals: {
      //包名 ： 全局变量名
      "vue": 'Vue',
      "echarts": 'echarts',
      // iview需要这么做，直接  "view-design": 'ViewUI',会报错，iview版本问题
      "view-design": 'iview',
      "iview": 'ViewUI',
    },
  },

然后，还有使用路由懒加载，不过现在大家都使用这个了吧。

然后，还可以再配置gzip压缩，用compression-webpack-plugin插件对我们的代码进行压缩

// yarn安装
yarn add compression-webpack-plugin -D
// 或npm
npm install compression-webpack-plugin --save-dev

如果安装压缩依赖包启动后报错：TypeError: Cannot read property ‘tapPromise’ of undefined，应该是版本问题，将版本固定在"compression-webpack-plugin": "^5.0.0",这个版本，再重新启动就好了

const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css)?$/i, // 哪些文件要压缩
        filename: '[path].gz[query]',　// 压缩后的文件名
        algorithm: 'gzip',　// 使用gzip压缩
        minRatio: 1,　// 压缩率小于1才会压缩
        deleteOriginalAssets: true // 删除未压缩的文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false
      })
    ]
  }
}

然后进行打包操作后 会看到压缩后的资源小很多

还需要在nginx服务器配置一下静态压缩：

server {
    gzip on;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
    
    gzip_static on;
}

gzip_static设置为on之后，这样在访问资源的时候，如果存在“资源路径.gz”的文件，则会直接返回该文件，其优先级高于动态的gzip。

设置完后 可以对比前后打包后的体积对比。