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