vue项目优化，加快服务器端渲染速度
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>