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

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

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

　　一開始項目部署到線上後第一次訪問首頁的時間是七、8秒的樣子，頁面加載太慢了本身都接受不了況且用戶。前端

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

　　一、vue路由的加載方式

import Home from '@/components/Index'

改成webpack

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

　　上面那種普通的加載方式的缺點是把全部的路由打包在一個js文件裏面頁面多的話這個文件會很是大加載的很慢。nginx

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

　　二、第三方依賴包的引入

　　　　main.jsvue-router

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引入。npm

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

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。

　　三、打包生成壓縮包，同時不生成.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文件也變得很小了。

　　　　以上是我對項目速度優化的所有步驟但願對有須要的小夥伴們有所幫助！！

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

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

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

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

　　一、vue路由的加載方式

import Home from '@/components/Index'

改成

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

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

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

　　二、第三方依賴包的引入

　　　　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/>' })

　　　　在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>