• 使用vue打包,vendor文件过大,或者是app.js文件很大


    我的解决办法:

    1、把不常改变的库放到index.html中,通过cdn引入,比如下面这样:

    然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码

    externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT',
     },

    这样webpack就不会把vue.js, vue-router, element-ui库打包了。声明一下,我把main.js中对element的引入删掉了,不然我发现打包后的app.css还是会把element的css打包进去,删掉后就没了。

    然后你打包就会发现vendor文件小了很多~

    在项目config/index.js中可以开启gzip压缩,对打包优化也有很大的帮助

          1.首先安装插件 compression-webpack-plugin

    cnpm install --save-dev compression-webpack-plugin

          2.设置productionGzip: true

    webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: new RegExp(
    '\.(' +
    config.build.productionGzipExtensions.join('|') +
    ')$'
    ),
    threshold: 10240,
    // deleteOriginalAssets:true, //删除源文件,不建议
    minRatio: 0.8
    })
    )

    修改服务器的配置,这里的服务器是Nginx 
    找到conf目录下的nginx.conf ,开启gzip,并设置gzip的类型,如下

    gzip on; 

          gzip_buffers 4 16k;

          gzip_comp_level 5;

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

  • 相关阅读:
    sqlalchemy presto 时间比较
    python 读取consul配置
    移动平台自动化测试:appium(二)
    移动平台自动化测试:appium(一)
    web自动化测试:watir+minitest(五)
    web自动化测试:watir+minitest(四)
    从智能垃圾桶模型引发的思考?
    AD技巧之敷铜
    AD技巧之如何修改过孔的默认尺寸
    硬件工程师之路之电阻知识
  • 原文地址:https://www.cnblogs.com/web-chuanfa/p/11162194.html
Copyright © 2020-2023  润新知