使用npm run build打包后文件中的js如下：  app.hash值.js ：主入口 （所有的hash都是自動生成的） chunk-vendors.hash值.js：（chunk：塊 vendors代理商）第三方包的代碼都統一放在這里(vue,vuex,vue-router,UI庫) chunk_hash值.js：某個模塊對應的js （某個.vue文件編輯后的.js） chunk-chunk-hash.js.map: 它會記錄當前的.js文件包含了哪個模塊，對應代碼位置，有利于代碼出錯快速找到源代碼 ***** ## 1.配置根目錄：webpack設置根路徑別名，減少打包時路徑查找時間 ``` configureWebpack: { name: "", resolve: { extensions: ['.js', '.vue', '.json', '.ts'], alias: { "@": resolve("src") } } }, ``` ***** ## 2.生產環境去除 sourceMap ``` productionSourceMap: false, // 是否在構建生產包時生成 sourceMap 文件，false將提高構建速度 ```  **去除前：**  **去除后：**  **擴展：** map文件的作用：當報錯或者出現警告時，可以快速查看對應出問題的代碼 有map文件時報錯：  沒有時報錯：  ***** ## 3.路由懶加載 方式一：先引入，再設置 ``` import HomeView from '../views/HomeView.vue' { path: '/home', name: 'home', component: HomeView, } ``` 方式二：懶加載 ``` { path: '/login', name: 'login', //使用webpack中的魔法注釋，聲明模塊名稱，打包時輸出的就是這個，如果沒有的話， 則是webpack自動生成的 component: () => import(/* webpackChunkName: "login" */'@/components/login.vue'), }, ``` **懶加載前的app.js：**  **懶加載后的app.js:**  **前后對比：**  **總結：** 可以看到路由懶加載之前，所有文件都會打包到app.js中，懶加載后，會分離出對應的路由，生成一個新的js文件，從而達到首次加載更快的目的，缺點：每次加載都需要等待； 當頁面比較頻繁切換的時候 ，建議先引入再使用， 如果一些不頻繁的頁面通過路由懶加載的方式使用。 所以，并不是所有的路由都需要使用懶加載 ***** **4.關閉Prefetch：首次加載速度優化** 因為vuecli 3默認開啟prefetch(預先加載模塊)，提前獲取用戶未來可能會訪問的內容 在首屏會把這十幾個路由文件，都一口氣下載了 ``` chainWebpack(config) { config.plugins.delete("prefetch"); // TODO: need test } ``` ***** **5.按需加載第三方庫：如：element ui** 1.安裝 babel-plugin-component：借助?[babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component "babel-plugin-component")，我們可以只引入需要的組件，以達到減小項目體積的目的。 npm安裝：` npm install babel-plugin-component -D` 2.?babel.config.js ``` module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ['@babel/preset-env', { modules: false }] ], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ] ] } ``` 3.按需引入 ``` a.新建一個element.js文件 import Vue from 'vue'; import { Button,Dialog,Message } Vue.use(Button); Vue.use(Dialog); Vue.use(Message); Vue.prototype.$message = Message;//加到原型 b.在main.js引入element.js ``` 按需加載前：  按需加載后（此處所有組件都引入注冊了）：  ***** **6.CDN的方式引入** cdn庫：[https://www.bootcdn.cn/](https://www.bootcdn.cn/)  CDN（內容分發網絡）指請求資源的方式，即通過script頭去請求對應的腳本資源的一種方式，項目里配置之后不需要通過npm包管理工具去下載配置的包。 目的：將引用的外部js、css文件剝離開來，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器可以使用多個線程異步將vendor.js、外部的js等加載下來，達到加速首頁展示效果。 ## 1. 在vue.config.js進行配置:對router、vuex、axios、element ui引入 ``` //生產環境標記 const IS_PRODUCTION = process.env.NODE_ENV === 'production' //配置引用cdn的js、css地址 const cdn = { css: [ 'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css' ], js: [ 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.min.js', 'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js', 'https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js', 'https://unpkg.com/element-ui@2.13.2/lib/index.js', ] } //配置打包時使用CDN節點（加入externals外部擴展）， 忽略打包的第三方庫 //左面放package.json中的擴展的名稱,右面放項目依賴的名稱(項目初始化要用的名稱) const externals = { // 屬性名稱 vue, 表示遇到 import xxx from 'vue' 這類引入 'vue'的，不去 node_modules 中找，而是去找全局變量 Vue（其他的為VueRouter、Vuex、axios、ELEMENT，注意全局變量是一個確定的值，不能修改為其他值，修改為其他大小寫或者其他值會報錯） vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', axios: 'axios', 'element-ui': 'ELEMENT', 'echarts': 'echarts' } chainWebpack(config) { if (IS_PRODUCTION) { config.plugin('html').tap(args => { args[0].cdn = cdn return args }) //視為一個外部庫，而不將它打包進來 config.externals(externals) } } ``` ## 2.在public/index.html文件配置 使用`webpack`中自帶的插件 html插件進行配置，在`index.html`中增加判斷，是否使用 CDN，`htmlWebpackPlugin.options`使用的是`vue.config`中的`config.plugin('html')`的插件屬性。 ``` <!-- 使用CDN的CSS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" /> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /> <% } %> <!-- 使用CDN加速的JS文件，配置在vue.config.js下 --> <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %> ``` ***** **7.去除console.log** 1.安裝插件`babel-plugin-transform-remove-console` 2.babel.config.js ``` const prodPlugins = [] if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console') } module.exports = { presets: [ // 原有的默認配置 '@vue/cli-plugin-babel/preset' ], plugins: prodPlugins } ``` **去除前：**  **去除后（靜態項目，打印內容很少）：**