本文同步更新于我的個人部落格點選前往。如果對您有幫助,請為我點個小星星。首先說下我目前已經做的優化點,本文是在此基礎上做的進一步優化:
- 配置路由懶加載,封裝了異步元件引入的方法,接收一個位址做參數
/** * 傳回異步元件 * @tips 請注意頁面隻能挂載在views檔案下,非此路徑請勿使用 */const AsyncComponentHook = (path: String): Function => (): any => { // 通過 webpack 的内聯注釋,設定子產品名 let component = import(/* webpackChunkName: "view-[request]" */ `@/views/${path}.vue`); component.catch((e) => { console.error(e); }); return component;};複制代碼
- 配置代碼壓縮
// 安裝 npm install uglifyjs-webpack-plugin // 在vue.config.js檔案中添加配置 configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 為生産環境修改配置... config.plugins.push( //生産環境自動删除console new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: true, drop_console: true, }, }, sourceMap: false, parallel: true, }) ); } },複制代碼
- 配置引用别名
- 設定插件的按需引入,本文使用的是element-ui，點選檢視詳情
...
經過一些基礎的配置後,我們來看下目前打包後的效果。
從下圖可以看到,打包出來後最大的包有1.33M。然後再看下請求,哇,217個請求、首頁下載下傳需要3.2M。
...
好吧，開始折騰
1. 優化scss配置檔案的引入
我們在搭建項目的過程中經常性的會将一些scss配置檔案抽離出來，例如主題色等，然後在每個需要的元件中引入。這樣會顯得很繁瑣，我們可以借助sass-loader幫我們進行預處理， 這樣我們就不用在每一個頁面都進行引入樣式，就能直接引用。
例如我們的樣式檔案目錄下有一個theme.scss，我們可以在vue.config.js中作如下處理
// vue.config.js 配置module.exports = { css: { // css預設器配置項 loaderOptions: { // pass options to sass-loader sass: { // 引入全局變量樣式,@使我們設定的别名,執行src目錄 data: ` @import "@/stylePath/theme.scss"; ` } }, },}複制代碼
通過以上配置,就可以在元件模闆中注釋以下代碼
複制代碼
2. 針對請求數進行優化
我們發現請求數增多是因為我們頁面預先渲染了其它元件，會在html頁面中插入像這樣的東西，這該怎麼優化呢？
首先我們先看下vue.config.js的官方文檔，點選前往。 官方說明： 是一種 resource hint，用來告訴浏覽器在頁面加載完成後，利用空閑時間提前擷取使用者未來可能會通路的内容。
是以我們添加如下配置
// vue.config.jsmodule.exports = { chainWebpack: config => { // 移除 prefetch 插件 config.plugins.delete('prefetch') // 移除 preload 插件 config.plugins.delete('preload'); }}複制代碼
3. 公用代碼提取，使用cdn加載
對于vue, vuex, vue-router，axios等我們可以利用wenpack的externals參數來配置，這裡我們設定隻需要在生産環境中才需要使用:
// vue.config.jsconst isProduction = process.env.NODE_ENV === 'production';const cdn = { css: [], js: [ 'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js', 'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js', 'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js', 'https://cdn.bootcss.com/axios/0.18.0/axios.min.js', ]}module.exports = { chainWebpack: config => { // 生産環境配置 if (isProduction) { // 生産環境注入cdn config.plugin('html') .tap(args => { args[0].cdn = cdn; return args; }); } }, configureWebpack: config => { if (isProduction) { // 用cdn方式引入 config.externals = { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios' } } },}複制代碼
接着修改html檔案，添加注入代碼
We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue. 複制代碼
然後打包重新開機，我們再來看下目前的變化。
嗯，真香~從下圖可以看到,打包出來後最大的封包件隻有775kb。然後再看下請求,哇,43個請求、首頁下載下傳隻需要1.4M。
可以看出，我們這一系列的操作後請求數減少了174個，首頁渲染減少了1.8m,真是可喜可賀
最後，附上完整的vue-config.js檔案
const path = require("path");const UglifyJsPlugin = require('uglifyjs-webpack-plugin');const isProduction = process.env.NODE_ENV === 'production';const cdn = { css: [], js: [ 'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js', 'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js', 'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js', 'https://cdn.bootcss.com/axios/0.18.0/axios.min.js', ]}function resolve(dir) { return path.join(__dirname, dir)}module.exports = { // 基本路徑 baseUrl: './', // 輸出檔案目錄 outputDir: 'dist', // 放置生成的靜态資源 (js、css、img、fonts) 的 (相對于 outputDir 的) 目錄。 // assetsDir: "./