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

最新推荐文章于 2024-04-27 04:48:30 发布

diego1993

最新推荐文章于 2024-04-27 04:48:30 发布

阅读量840

点赞数

文章标签： javascript webpack 数据库 ViewUI

原文链接：http://www.cnblogs.com/zlbrother/p/9152517.html

版权

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

注意，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 }) ]

* 这是为了解决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>

转载于:https://www.cnblogs.com/zlbrother/p/9152517.html

diego1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue项目优化，加快服务器端渲染速度

1. CSS在开发模式中用import，在打包后用CDN　min.js中做如下操作if (process.env.NODE_ENV == 'development') {　　require('../xxx.css');}　index.html中引入相应UI的CDN2. 减少vendor.js的体积　#2.1 提取js到外部，减小vendor.j...
复制链接

扫一扫