更新版本
1 .Node，Npm ,Yarn，webpack 在项目上尽可能使用新的版本，是提升打包速度的第一步
2 .不过要先阅读大版本的升级说明，不兼容的地方就直接跪了
3 .webpack 4优化
1 .V8引擎带来的优化
2 .使用更快的md4 hash算法
3 .webpack AST 可以直接从loader传递给AST，减少解析时间
4 .使用字符串代替正则表达式
体积分析
1 .BundleAnalyzerPlugin
2 .使用工具来查看部分代码的体积大小，替换体积比教大的部分
tree-shaking
1 .对js代码进行摇树优化
Dead code
1 .不会用到的代码
2 .首次加载不会执行的代码建议都执行懒加载策略
3 .chrome f12 ctrl shift p，show coverage :红色的部分都是现在没用到的代码，存在优化空间的
scope-hoisting
1 .webpack 构建之后存在的大量闭包代码
2 .webapack4 中mode设置production后也是默认开启的此项优化
3 .开启scope-hoisting 会将所有模块的代码按照引用顺序，放在一个函数作用域内，使用重命名来保证命名不会发生冲突
多进程构建
1 .目前用不到
分包，预编译资源模块
1 .预编译资源模块
2 .Vue,axios等不会变的资源打包成一个文件，不会改变的时候每次编译都会跳过这里
3 .dll-plugin 但是这个组件比较复杂，如果仅仅是为了提升速度，直接使用hard-source-webpack-plugin 这个包就好
html-webpack-externals-plugin
1 .可以将公用的包提取出来，用cdn引入，不打入bundle
2 .
使用动态Polyfill服务
1 .原理:每次打开浏览器，浏览器去请求Polyfill.im，识别浏览器的User Agent，下发不同的Polyfill
合理使用source map
开发环境使用内存编译
1 .使用内存编译:开发的时候使用webpack-dev-server帮助我们进行开发打包，他会把打包文件放在内存中去，不会放到相应的dist目录下，而内存的读取肯定会比硬盘读取要快的多
网友评论