帮你理解如何构建一个像样的webpack打包环境

webpack的作用

压缩资源以及合并，减小文件打包后的体积，还可以减少http请求次数以及花费的时间(例如图片转为base64)
方便前端开发大型项目，提高开发效率，共三个模式，开发模式以及生产模式以及测试模式

webpack的缺点

webpack的构建过程费时
webpack打包的结果体积太大，所以就需要在搭建开发环境时做构建优化

如何构建优化—提升开发效率

减少loadr的工作量

 让loader做更少的事情，可以使用include处理目标文件，使用exclude选项规避类似node_modules类的文件

第三方库和业务代码抽离的必要性

类似React库或Wepack大型的第三方库会严重拖累构建速度，初次执行后直接加入缓存是非常有效的优化,所以需要针对第三方库，使用optimization.splitChunks,作用是将公共模块和业务代码分离，公共模块初次提交后直接缓存，或者使用dllPlugin,依赖的第三方库不会和业务代码一起重新打包，除非发生版本变化

将loader由单进程转为多进程构建

 Happypack--将loader由单进程转为多进程,进程是程序运行的数据集合，是系统资源分配基本单位，一般情况下单核cpu只有一个单进程，多核cpu在node的cpu利用率不足的情况下才会由单进程转为多进程。而Happypack帮我们做了这个事儿。多核并发，最大限度使用多核cpu的作用。大大提升效率。

babel-loader可以开缓存优化

loader:'babel-loader?cacheDirectory=true'

可视化工具的使用 webpack-bundule-analyzer

一个plugin和CLI工具，它将bundle内容展示为一个便捷的交互式、可缩放的树状图形式
// 可使用的代码分离的可视化帮助  bundle分析

体积压缩,删除冗余代码

tree-shaking 粗粒度的删除压缩


 把那些es6模块化语法未使用到冗余代码不进行打包，强调：基于模块化级别的优化
 使用方法：添加一个通用模块文件src/math.js,并导出两个函数src/math.js，需要将mode设置为development

  export function square(x) {
    return x * x;
  }

  export function cube(x) {
    return x * x * x;
  }
  在入口脚本中index.js/main.js引入
  import { cube } from './math.js'

UglifyJsPlugin细粒度的删除压缩

 首先压缩也算优化，压缩css的文件CssMinimizerPlugin;剥离css中为无用代码，js压缩UglifyJsPlugin。bulid生产模式优化

webpack实现按需加载，代码分离模块

主要使用两个方法，第一种，也是推荐的方法，ECMA提案的import()语法来实现动态导入。

import 返回的是一个promise语法，所以可以使用async和await语法，
const {default:_} = await

第二种方法，使用webpack遗留的方法,即使是React-Router4中，使用的Code-Spliting的源码使用的也是require.ensure,

// 实现的都是异步加载，以路由懒加载为例，webpack打包时，被异步导入的组件会被单独打包成一个文件，只有跳转到这个路由的时候，
// 这个异步方法的回调才会生效，才会真正的去取这个这个路由组件的内容，这就是按需加载，不仅仅是路由，甚至可以细化到一个小组件，甚至功能点
// 所谓的按需加载，根本上就是正确的时机去触发相应的回调
// 核心代码
const getComponent => (location, cb) {
  require.ensure([], (require) => {
    cb(null, require('../pages/BugComponent').default)
  }, 'bug')
},
// 核心方法
 require.ensure(dependencies,callback,chunkName)

路径指定别名优化

找包的时候浪费时间，因为node环境里找包(‘没有/的包’)顺序是先找node本身的包，在找当前文件夹下有没有这个包，最后找node_modules,node_modules没有就在全局寻找，在resolve里增加别名，dev优化

resolve:{
  //别名设置
  alias:{
    // 加速第三方包的查找速度
    ' react' : path.resolve(__dirname,'../node_modules/react/cjs/react.developmlent.js'),
  },
}

环境模式的细化分类

mode = production本身就是一种代码量的优化，但是这种默认的压缩，我们可以使用第三方库进一步压缩uglifyjs-webpack-plugin 最少化你的代码
开启babel缓存，我们只对js文件开启缓存，对babel-loader缓存，dev优化

//对babel开启缓存，还有的第三方库把无用的js代码剥离掉
  options: {
    cacheDirectory: true
  }

eslint代码优化，没有用到的东西就报错，报错本身就是一种优化，代码层面的优化

帮你理解如何构建一个像样的webpack打包环境

帮你理解如何构建一个像样的webpack打包环境

webpack的作用

webpack的缺点

如何构建优化—提升开发效率

相关推荐