elementui 加载中_Webpack Vue瘦身，感受快到飞起的加载速度！-CSDN博客

症结

在利用webpack脚手架搭建vue项目后，往往最终打包的.js和.css文件过于庞大，造成首次加载的时候白屏时间过长，影响用户体验，下图为未经任何优化直接npm run build之后的情况：

其中vendor.js文件高达1.16MB，平均白屏时间超过10秒。

解决方案

使用CDN剥离JS文件，让他们独立加载：

找出那些巨头JS引用，如本例中的：Vue、Vue-Router、Element-UI、Quill等。
访问https://www.bootcdn.cn/，找到这些文件的CDN引用

(当然你也可以选择其他CDN网站，本例使用bootcdn.cn)

3. 修改项目根目录下的 index.html

4.修改 /build/webpack.base.conf.js 文件

module.exports = {  context: path.resolve(__dirname, '../'),  entry: {    app: './src/main.js'  },// 在这个位置添加externals设置：  externals: {     'vue': 'Vue',    'vue-router': 'VueRouter',    'element-ui': 'ELEMENT', //注意element-ui的引用时纯大写    'vue-quill-editor': 'VueQuillEditor',  },  output: {    path: config.build.assetsRoot,    filename: '[name].js',    publicPath: process.env.NODE_ENV === 'production'      ? config.build.assetsPublicPath      : config.dev.assetsPublicPath  },

回到Vue源文件里面，删除关于Vue、Vue-Router、element-ui相关的import和Use：

//import ElementUI from 'element-ui'//import Vue from 'vue'//import Router from 'vue-router'//Vue.use(ElementUI)//Vue.use(Router)//Vue.use(VueQuillEditor)

将这些代码通通注释掉，因为在externals里面已经做过声明了，如果在Vue文件里再声明一次，将会报重复引用的错误。

完成后，让我们再执行一次npm run build看看效果，发现果然大大地瘦了一次身，如图：

vendor.js从1.2M瞬间减肥减到了109K

开启zip压缩模式，进一步瘦身

找到：/config/index.js，将productionGzip改为true

    productionGzip: true,    productionGzipExtensions: ['js', 'css'],

检查服务器端有没有打开gzip，这里以nginx为例，检查nginx.conf文件：

gzip  on;gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

再次运行npm run build，效果如下：

可以看到vendor.js文件被狠狠地压缩到只有34Kb的程度

经过优化后，首页平均加载时间从10秒压缩到了2秒左右，优化效果十分明显。