vue打包解決 首屏載入速度慢
阿新 • • 發佈：2021-06-24
1.productionSourceMap
vue.config.js 中將productionSourceMap 引數值設定為false, 去掉打包的時候生成的map檔案
2.CompressionWebpackPlugin
打包生成 gzip 壓縮檔案
安裝： npm installcompression-webpack-plugin --save-dev
修改 vue.config.js 的配置檔案
const CompressionWebpackPlugin = require("compression-webpack-plugin"); /** * 需要在改下nginx的配置 啟用gzip壓縮 **/ configureWebpack: { plugins: [ new CompressionWebpackPlugin({ filename: "[path][base].gz", algorithm: "gzip", // test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), //匹配檔名 test: /\.js$|\.html$|.\css/, threshold: 10240, //對超過10k的資料壓縮 minRatio: 0.8, deleteOriginalAssets: false //不刪除原始檔 }) ] }
3. 使用cdn
修改 vue.config.js
const cdn = { css: ["//unpkg.com/[email protected]/lib/theme-chalk/index.css"], js: [ "//unpkg.com/[email protected]/dist/vue.min.js", "//unpkg.com/[email protected]/dist/vue-router.min.js", "//unpkg.com/[email protected]/dist/vuex.min.js", "//unpkg.com/[email protected]/lib/index.js" ] }; module.exports = { pages: { index: { entry: "src/main.js", template: "public/index.html", filename: "index.html", title: "中國手球協會", chunks: ["chunk-vendors", "chunk-common", "index"], cdn: cdn } }, configureWebpack: { externals: { vue: "Vue", "element-ui": "ELEMENT", "vue-router": "VueRouter", vuex: "Vuex" }, } }
然後修改 public/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.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> <% for (let i in htmlWebpackPlugin.options.cdn.css) { %> <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" /> <% } %> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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 (let i in htmlWebpackPlugin.options.cdn.js) { %> <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" ></script> <% } %> </body> </html>