其他分享
首页 > 其他分享> > 前端工程化6-webpack应用优化

前端工程化6-webpack应用优化

作者:互联网

总体优化思路

速度更快,打包速度更快、渲染速度更快
体积更小,打包体积更小、
提前,首屏提前渲染,首屏静态资源预加载、
滞后,非首屏资源按需加载
转移,静态资源转移cdn

webpack应用的优化方向

开发体验上,一个是追求构建速度,另一个是响应速度
线上体验,一个是包体积大小,加载速度,首屏响应速度等

  1. 构建速度、多线程构建
    使用happyPack插件开启多线程来加速构建

  2. 代码压缩
    使用uglifyjs来压缩代码,一般使用minify方法来进行压缩,如果不满足要求,uglifyjs还提供了其他api

  3. 提取公共代码
    如果a模块引用了c模块,b模块也引用了c模块,这时候如果不提取出公共模块c的话,就会有重复的c模块一起打包至bundle,导致体积增大。提取公共模块的方法使用webapck内置的CommonsChunkPlugin插件来进行配置。在webpack.config.js中配置optimization.splitChunks,common、vender完成之后,webpack会将公共代码打包至一个单独的bundle文件里。

  4. 代码按需加载、代码分割
    大型单页应用打包后的bundle体积过大,因此我们需要对代码进行分割成多个bundle,通过类似于懒加载的方式来加载当前用户所需要的页面内容。代码分割的实现方式一般有3种:

  1. 去除没有使用到的代码,tree-shaking
    tree-shaking一句话概括就是摇掉没有使用到的代码,不将无用代码构建打包。webpack可以通过静态分析依赖关系来找出工程中没有使用到的代码,以此来删除这部分代码。

  2. 自动刷新和热替换
    webpack-server-dev给开发者提供了一个页面自动刷新的选项,我们只需要在配置文件(webpack.config.js)里开启文件监听,即watch:true,这样我们的文件只要有改动,页面就会自动刷新了,当然可以选择性的监听某些文件,比如我们可以忽视掉node_modules包里的文件的监听,这会大大降低内存和cpu的消耗。除了页面的自动刷新之外,devserver还提供了模块热替换(Hot Module Replacement)的技术,在不刷新整个网页的情况下,替换修改了的个别模块,使用起来特别简单,在webpack.config.js文件里的devServer配置hot:true.

标签:代码,js,webpack,模块,工程化,前端,打包,加载
来源: https://www.cnblogs.com/xingguozhiming/p/15733188.html