前端面试题-webpack打包优化

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣学习前端知识

面试题

webpack打包优化

优化方式

1、 按需加载

1.1 路由组件按需加载
1.2 第三方组件和插件。按需加载需引入第三方组件
1.3 对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入

2、生产环境关闭 sourceMap

3、代码压缩

• UglifyJS: vue-cli 默认使用的压缩代码方式，它使用的是单线程压缩代码，打包时间较慢
• ParallelUglifyPlugin: 开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成

4、CDN 优化

• 随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。
• 再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。
  1、将 vue、vue-router、vuex、element-ui 和 axios 这五个库，全部改为通过 CDN 链接获取，在 index.html 里插入 相应链接。