webpack build优化项

首页加载优化,前端需要考虑的点:

  • 路由懒加载;
    开发环境使用如下路由加载方式,避免热更新问题
    module.exports = (file: string) => require(@/views/${file}.vue).default
    生产环境使用ES6 的 import() 或者webpack 的 require.ensure() 来实现路由按需加载
    module.exports = (file: string) => () => import(@/views/${file}.vue)
  • 服务器端是否开启Gzap压缩;
  • 图片大小优化(后端生成缩率图);
  • SVG 大小检查;
  • webpack 分包策略
    Webapck4 版本之前使用CommonsChunkPlugin
    webpack 4 最大的改动就是废除了 CommonsChunkPlugin 引入了 optimization.splitChunks。如果你的 mode 是 production,那
    么 webpack4 就会自动开启 Code Splitting。

分包策略主要是针对引用的加大的一些js库,实行分包加载,从而减小app.xxxx.js和vendor.js的体积

  • 使用cdn引入第三方库
    使用 cdn 也是避免 app.xxxx.js和vendor.js的体积过大

你可能感兴趣的:(webpack build优化项)