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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。