vvue 打包優化
路由按需加載
通過vue寫的單頁應用時，可能會有很多的路由引入。當打包構建的時候，javascript包會變得非常大，影響加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應的組件，這樣就更加高效了。這樣會大大提高首屏顯示的速度。 const Home = () => import( './Home.vue') const router = new VueRouter({ routes: [ { path: '/home', component: Home } ] }) 動態import()打包出來文件的name是按照0,1,2...依次排列，如0.js、1.js等，有的時候我們希望打包出來的文件名是打包前的文件名稱。webpackChunkName 可以設置打包后的文件名稱。
const Home = () => import(/*webpackChunkName:'Home'*/ './Home.vue') 大多數情況下使用動態import()循環加載的，這樣就需要進入變量，使用[request]來告訴webpack，這里的值是根據后面傳入的字符串來決定。
import(/* webpackChunkName: "[request]" */ `@/components/${view}.vue`) app.js vendor.js manifest.js
CDN
#### 為什么使用CDN 在前端工程中，將靜態文件放到CDN上，可以直觀地減小資源包大小，同時加快首屏加載。
- 若不使用CDN，則所有的資源都會被打包到app.js和vendor.js中，頁面需要等到這兩個包下載完成才可以顯示。
- 若使用CDN，則可以利用瀏覽器多線程的優勢，同時下載若干靜態文件以及剩下的app.js和vendor.js，以此達到加快加載的目的。
首先，在index.html的頭部引入cdn資源
<script src="//unpkg.com/vue@2.6.11/dist/vue.min.js"></script> <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script> <script src="//unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script> <script src="//unpkg.com/axios@0.19.0/dist/axios.min.js"></script> <script src="//unpkg.com/echarts@4.5.0/dist/echarts.min.js"></script> 在webpack設置中添加externals（外部擴展)設置，如此，則import 引用的資源將不被打包，而是在運行時從外部獲取。
configureWebpack: (config) => {
config.externals = {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'axios: 'axios',
'echarts': 'echarts',
}
},
Gzip打包壓縮
安裝插件
yarn add -D compression-webpack-plugin
在文件vue.config.js里導入compression-webpack-plugin，並添加壓縮文件類型
const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i 在configureWebpack 里配置如下代碼
module.exports = { productionSourceMap:false, configureWebpack: (config) => { config.plugins.push( new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: productionGzipExtensions, // 匹配需要壓縮的后綴名 threshold: 10240, //只有大小大於該值的資源會被處理單位字節 minRatio: 0.8, //只有壓縮率小於這個值的資源才會被處理。默認值是 0.8。 }), ) }, Nginx配置 ```js server{ listen 8087; server_name localhost; gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; location /appShare { client_max_body_size 10m; root /home/test/webIndex/appShare; try_files $uri $uri/ /appShare/index.html; index index.htm index.html; } } 關閉SourceMap
在項目進行打包后，會將開發中的多個文件代碼打包到一個文件中，並且經過壓縮，去掉多余的空格，且babel編譯化后，最終會用於線上環境，那么這樣處理后的代碼和源代碼會有很大的差別，當有bug的時候，我們只能定位到壓縮處理后的代碼位置，無法定位到開發環境中的代碼，對於開發不好調式，因此sourceMap出現了，它就是為了解決不好調式代碼問題的。
優點 ： 對於開發者開說，方便調試，可以看到源代碼
缺點： 生成的sourcemap文件會增加打包的體積。線上用戶也能看到源代碼。
構建結果輸出分析
在 Vue 項目中用到的分析工具：webpack-bundle-analyzer 。它以圖形的方式將結果更直觀地展示出來，分析打包后的每個模塊的大小。
安裝插件
yarn add -D webpack-bundle-analyzer
在文件vue.config.js里導入compression-webpack-plugin
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { config.plugins.push(new BundleAnalyzerPlugin()) } }, 執行yarn run build --report 后生成分析報告
stat (打包之前輸入的文件大小)
parsed（打包之后輸出的文件大小）
gzipped（開啟gzip壓縮后的文件大小）