vue-cli之webpack打包优化

问题1:chunk-vendors.js 无hash后缀 问题2:chunk-vendors.js 文件过大 导致首次加载缓慢

问题1 1.webpack 默认在构建生产包时会自动生成带hash的vendors

• 1.filenameHashing默认开启

• 2.devtool: false 关闭source map webpack.docschina.org/configurati…

configureWebpack: config => {
 devtool: false
}

• 3.在env.production

NODE_ENV = 'production'

• 4.注意env.~ 的空格,多余空格会导致打包产物无hash(可能是暗病) 运行 vue-cli-service build --mode production

问题2

1.element 按需加载

2.开启压缩

plugins: [
    new CompressionPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
    }),
]

3.nginx.config 开启压缩

gzip on; 
gzip_types text/plain text/[css]() text/[xml]() application/javascript application/[rss]()+xml application/atom+xml image/svg+xml;