Vue 打包優化

時間 2019-11-08

標籤 vue 打包優化简体版

原文原文鏈接

最近在作一個從頭至尾本身搭建的項目，由於時間趕的緣由，一噸亂搞以後，打包起來發現一個js文件竟然要1.6MB,因而從網上找了許多大佬的文章作了一次打包優化，記錄一下過程。javascript

## 本次記錄以 vue-cli 3 爲主
複製代碼

本次優化分如下幾個步驟css

安裝 webpack-bundle-analyzer
路由懶加載
組件按需加載
使用gzip
剝離依賴包

一、安裝分析工具

npm intall webpack-bundle-analyzer -D
複製代碼

webpack-bundle-analyzer 可讓咱們很直觀的查看當前整個項目的打包狀況，運行命令以下html

npm run build --report 

// 在vue.config.js 中添加配置
 /* 添加分析工具 */
    if (process.env.NODE_ENV === 'production') {
      if (process.env.npm_config_report) {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          .end()
        config.plugins.delete('prefetch')
      }
    }
複製代碼

運行以後，會在瀏覽器打開一個頁面，能夠很直觀的看到打包狀況vue

二、路由懶加載

路由懶加載，其實也就是改路由的引用模式爲函數，也就是將路由引用改爲下面的形式java

{
      path: '/trans',
      components: {
        default: () => import('@/components/Commons/Transforma')
      }
}
複製代碼

三、組件按需加載

組件按需加載須要安裝 babel-plugin-componentwebpack

npm install babel-plugin-component
複製代碼

按需引入就以官方的配置爲準就能夠了，例如我使用的 mint-ui 框架web

plugins: [
    [
      'component',
      {
        'libraryName': 'mint-ui',
        // 'styleLibraryName': 'theme-chalk',
        'style': true
      }
    ]
]
複製代碼

在vue-cli 3 的腳手架中，是沒有 .babelrc文件的，相應的操做能夠在 babel.config.js 中操做 vue-router

四、使用`Gzip`

// 先安裝compression-webpack-plugin
nmp i compression-webpack-plugin -D
複製代碼

而後在 vue.config.js配置一下vuex

/* gzip壓縮 */
if (process.env.NODE_ENV === 'production') {
  // 爲生產環境修改配置...
  config.mode = 'production'
  return {
    plugins: [new CompressionPlugin({
      test: /.js$|.html$|.css/, // 匹配文件名
      threshold: 10240, // 對超過10k的數據進行壓縮
      deleteOriginalAssets: false // 是否刪除原文件
    })]
  }
}
複製代碼

五、剝離依賴包

使用externals來決定剝離依賴包，固然這個剝離的意思只是在打包的時候，不對這些包進行打包，相反的，使用cdn進行引入vue-cli

首先在vue.config.js中配置externals

configureWebpack: config => {
    config.externals = {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter'
    }
},
// key : value ，key 爲依賴包的名稱，value能夠理解爲一個別名
複製代碼

而後就須要在public/index.html中的head引入cdn,具體代碼以下

// 在vue.config.js中配置
const cdn = {
    css:[],
    js:[
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js'
    ],
}

// 將cdn注入index.html中
chainWebpack:config => {
    config.plugin('html')
      .tap(args => {
        args[0].cdn = cdn
        return args
      })
}
複製代碼

而後在index.html之中引入一下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,viewport-fit=cover,minimum-scale=1, user-scalable=no">
    <!--引入cdn的js文件-->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
    <% } %>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1326977_2gh5rigij8r.css">
    <title>廣東食品安全監督綜合平臺</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but exam doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </body>
</html>
複製代碼

到這裏就完成了依賴包的剝離