使用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;

 

转载于:https://www.cnblogs.com/web-chuanfa/p/11162194.html