項目優化策略
5、通過 externals 加載外部 CND 資源
默認情況下，通過 import 語法導入的第三方依賴包，最終會被打包合並到同一個文件中，從而導致打包成功后，單文件體積過大的問題。
為了解決上述問題，可以通過 webpack 的 externals 節點，來配置並加載外部的 CDN 資源。凡是聲明在 externals 中的第三方依賴包，都不會被打包。
具體配置代碼如下：
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
在 vue.config.js 文件的發布模式中添加代碼：
// 發布模式--發布階段的打包入口 config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add('./src/main-prod.js') config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor' }) })
同時，需要在 pubic/index.html 文件的頭部，添加如下的CDN資源引用：
<!-- nprogress 的樣式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> <!-- 富文本編輯器的樣式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.core.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.bubble.min.css" />
打開 main-prod.js 文件：
刪除導入的 quill 和 nprogress 樣式表
打開 pubic/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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vue_shop</title> <!-- nprogress 的樣式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> <!-- 富文本編輯器的樣式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.core.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.bubble.min.css" /> </head> <body> <noscript> <strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
同時，需要在 pubic/index.html 文件的頭部，添加如下的CDN資源引用：
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script> <script src="https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script> <!-- 富文本編輯器的js文件--> <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
打開 pubic/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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vue_shop</title> <!-- nprogress 的樣式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> <!-- 富文本編輯器的樣式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.core.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.6/quill.bubble.min.css" /> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script> <script src="https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script> <!-- 富文本編輯器的js文件--> <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script> </head> <body> <noscript> <strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
當然也可以用 https://www.bootcdn.cn 這個地址。
打開可視化UI面板，重新 build 運行。
可以看到依賴項從2.1M，到現在的798KB，資源列表里的js/chunk-vendors 也從1.8M，到了544KB。
此時 serve 開發運行會有問題，先不用管，后面26會解決的。