zoukankan      html  css  js  c++  java
  • Webpack Vue瘦身,感受快到飞起的加载速度!

    症结

    • 在利用webpack脚手架搭建vue项目后,往往最终打包的.js和.css文件过于庞大,造成首次加载的时候白屏时间过长,影响用户体验,下图为未经任何优化直接npm run build之后的情况:
    Webpack Vue瘦身,感受快到飞起的加载速度!

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

    解决方案

    • 使用CDN剥离JS文件,让他们独立加载:
    1. 找出那些巨头JS引用,如本例中的:Vue、Vue-Router、Element-UI、Quill等。
    2. 访问https://www.bootcdn.cn/,找到这些文件的CDN引用

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

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

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <!--在meta这一行下面添加刚才在cdn网站找到的引用,注意版本号要和你的package.json里的一致 -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <link href="https://cdn.bootcss.com/quill/1.3.7/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/quill/1.3.7/quill.min.js"></script>
    <script src="/static/js/vue-quill-editor.js"></script>

    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
    },
    1. 回到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文件里再声明一次,将会报重复引用的错误。

    1. 完成后,让我们再执行一次npm run build看看效果,发现果然大大地瘦了一次身,如图:
    Webpack Vue瘦身,感受快到飞起的加载速度!

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

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

    1. 找到:/config/index.js,将productionGzip改为true
        productionGzip: true,
    productionGzipExtensions: ['js', 'css'],
    1. 检查服务器端有没有打开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;
    1. 再次运行npm run build,效果如下:
    Webpack Vue瘦身,感受快到飞起的加载速度!

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

    • 经过优化后,首页平均加载时间从10秒压缩到了2秒左右,优化效果十分明显。
  • 相关阅读:
    SharePoint 2013 商务智能报表发布
    sharepoint designer web 服务器似乎没有安装microsoft sharepoint foundation
    SharePoint 2013 Designer系列之数据视图
    SharePoint 2013 Designer系列之数据视图筛选
    SharePoint 2013 Designer系列之自定义列表表单
    SharePoint 2013 入门教程之创建及修改母版页
    SharePoint 2013 入门教程之创建页面布局及页面
    SharePoint 2010 级联下拉列表 (Cascading DropDownList)
    使用SharePoint Designer定制开发专家库系统实例!
    PL/SQL Developer 建立远程连接数据库的配置 和安装包+汉化包+注册机
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/12762735.html
Copyright © 2011-2022 走看看