vue+webpack+element-ui項目打包優化速度與app.js、vendor.js打包后文件過大

本文轉載自查看原文 2019-11-01 17:19 1264

---恢復內容開始---

　　從開通博客到現在也沒寫什么東西，最近幾天一直在研究vue+webpack+element-ui項目打包速度優化，想把這幾天的成果記錄下來，可能對前端牛人來說我這技術比較菜，但還是希望給有需要的朋友提供一下方便。

　　一開始項目部署到線上后第一次訪問首頁的時間是7、8秒的樣子，頁面加載太慢了自己都接受不了何況用戶。

　　主要是從一下幾步來優化的：

　　1、vue路由的加載方式

import Home from '@/components/Index'

改為

const Index = resolve => require(['@/components/Index'], resolve)

　　上面那種普通的加載方式的缺點是把所有的路由打包在一個js文件里面頁面多的話這個文件會非常大加載的很慢。

　　下面這種方式是按需加載在訪問的時候只加載相關的路由，又被叫做（懶加載）

　　2、第三方依賴包的引入

　　　　main.js

import Vue from 'vue'
import router from './router'
import Element from 'element-ui'
import echarts from 'echarts'


Vue.use(Element)
Vue.prototype.echarts = echarts

new Vue({
  el: '#app',
  store,
  router,
  components: {App},
  template: '<App/>'
})

　　　　這樣引入依賴包會把所依賴的第三方包全都打包起來從而造成打包后的 app.js和vendor.js文件過大加載的很慢，把這種方式改為CDN引入。

　　　　首先把main.js種引入的第三方包注釋掉,vue不用注釋

import Vue from 'vue'
//import router from './router'
//import Element from 'element-ui'
//import echarts from 'echarts'


//Vue.use(Element)
//Vue.prototype.echarts = echarts

new Vue({
  el: '#app',
  store,
  router,
  components: {App},
  template: '<App/>'
})

　　　　在webpack.base.conf.js中增加以下設置，這樣就不會把依賴包打包到自己的項目里面了

module.exports = {

  externals: {
    'vue': 'Vue',
    'element-ui': 'ElementUI',
    'echarts': 'echarts',
  }

}

　　　　然后在index.html中用CDN的方式引入

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,initial-scale=1.0">
　　<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.11.0/theme-chalk/index.css">
　　<title></title>
</head>
<body>
<div id="app"></div>
　　<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
　　<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
　　<script src="https://cdn.bootcss.com/element-ui/2.11.0/index.js"></script>
　　<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
</body>
</html>

　　　　這樣在打包的時候就不會把這些依賴包打包到里面，vendor.js有之前的2M多變成了200多K。

　　3、打包生成壓縮包，同時不生成.amp文件

　　　　先安裝 npm install --save-dev compression-webpack-plugin

　　　　找到config/index.js 修改productionSourceMap: false,默認是true修改為false這樣打包的時候就不會生成.map文件

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

　　　　打包生成壓縮包修改 productionGzip:true 默認是false 修改為true，修改完成后設置webpack.prod.conf.js, 這個設置在vue-lic 2.0以上版本中默認就已經設置好了，所以就不用

　　手動設置。

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

　　npm run build 有可能會報錯

ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties

　　這個錯誤是compression-webpack-plugin的版本的問題，我安裝的版本是 @1.0.0 可以成功打包

　　打包生成壓縮包部署到線上需要后台的配合設置 nginx 開啟:gzip

　　　　設置完以上及步驟后現在的速度保持在1s左右，打包后的js文件也變得很小了。

　　　　以上是我對項目速度優化的全部步驟希望對有需要的小伙伴們有所幫助！！

---恢復內容結束---