1. CSS在開發模式中用import，在打包后用CDN
min.js中做如下操作
if (process.env.NODE_ENV == 'development') {
require('../xxx.css');
}
index.html中引入相應UI的CDN
2. 減少vendor.js的體積
#2.1 提取js到外部，減小vendor.js體積
1. 在/build/webpack.base.conf.js中，增加externals：
module.exports = {
externals: {
'vue': 'Vue', 'axios': 'axios', 'iview': 'iview' } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
注意，externals的鍵值對中，鍵應為在
/src/main.js中import的名稱，值為引用的外部文件export的名稱。以cdn.bootcss.com的庫文件為例，vue的導出名為Vue，mint-ui為MINT，vue-router為VueRouter。
2. 復制/index.html為/index.dev.html，並修改/build/webpack.dev.conf如下：
plugins: [
new HtmlWebpackPlugin({ filename: 'index.html', // template: 'index.html', template: 'index.dev.html', inject: true }) ]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
* 這是為了解決dev環境下，重復引用庫的問題。
3. 在/index.html中，引入cdn文件
<body> <div id="app"></div> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/iview/2.6.0/iview.min.js"></script> </body>