说说如何借助webpack来优化前端性能

1.JS代码压缩

2.CSS文件代码压缩

3.HTML文件代码压缩

4.文件大小压缩:对文件的大小进行压缩,减少http传输过程中宽带的损耗

5.图片压缩:一般来说在打包之后,一些图片文件的大小是远远要比 js 或者 css 文件要来的大,所以图片压缩较为重要

6.Tree Shaking:Tree Shaking 是一个术语,在计算机中表示消除死代码,依赖于ES
Module的静态语法分析(不执行任何的代码,可以明确知道模块的依赖关系)

7.代码分离:将代码分离到不同的bundle中,之后我们可以按需加载,或者并行加载这些文件

8.内联 chunk:可以通过InlineChunkHtmlPlugin插件将一些chunk的模块内联到html,如runtime的代码(对模块进行解析、加载、模块信息相关的代码),代码量并不大,但是必须加载的

你可能感兴趣的:(前端,webpack)