zoukankan      html  css  js  c++  java
  • 使用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;

  • 相关阅读:
    [转]AsyncTask的用法
    [转]Android Service学习之本地服务
    强制页面运行于IE8模式下
    标签分类
    获取元素的文本
    遍历节点的API
    为IE的javascript提速
    我的选择器 获得经过标记的没有重复的tagName等于tag的元素集
    kangax 的javascript谜题
    自动执行函数
  • 原文地址:https://www.cnblogs.com/web-chuanfa/p/11162194.html
Copyright © 2011-2022 走看看