vue项目优化，加快服务器端渲染速度

时间 2019-12-14

标签 vue 项目优化加快服务器渲染速度繁體版

原文原文链接

1. CSS在开发模式中用import，在打包后用CDNjavascript

　min.js中作以下操做css

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：html

module.exports = {
    externals: {
        'vue': 'Vue', 'axios': 'axios', 'iview': 'iview' } }

注意，externals的键值对中，键应为在/src/main.js中import的名称，值为引用的外部文件export的名称。以cdn.bootcss.com的库文件为例，vue的导出名为Vue，mint-ui为MINT，vue-router为VueRouter。vue

2. 复制/index.html为/index.dev.html，并修改/build/webpack.dev.conf以下：java

plugins: [
    new HtmlWebpackPlugin({ filename: 'index.html', // template: 'index.html', template: 'index.dev.html', inject: true }) ]

* 这是为了解决dev环境下，重复引用库的问题。webpack

3. 在/index.html中，引入cdn文件ios

<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>