react前端优化小结笔记

缩小编译的范围
rules: [
  {
    test: /\.js$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          persets: [
            '@babel/preset-react'
          ],
          plugins: [
            '@babel/plugin-proposal-class-properties'
          ]
        }
      }
    ],
    include: path.resovle('src'),
    exclude: /node_modules/
  }
]

配置解析
 …
 const bootstrap = path.resolve(“node_modules/boostrap/dist/css/bootstrap.css”)
 …
 resolve: {
 modules: [path.resolve(‘node_modules’)] // 查找范围
 extensions: [‘.js’, ‘.ts’], // 扩展 名 越少越好
 alias: {
 bootstrap
 },
 fallback: {
 cryto: false, // 假如说你引用的一个包里面有node核心模块 它会帮你跳过这个node核心模块的引用 让你最后打出来的包体积更小
 buffer: false,
 stream: false
 }
 },
 module: {
 rules: […]
 },

上面提到了

如果配置了这个插件 就不会打包lodash模块 会引入 _ 这个全局变量
new HtmlWebpackExternalsPlugin({
  externals: [
    {
      module: 'lodash',
      entry: 'https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/loadash.js',
      global: '_'
    }
  ]
})

{
  loader: 'babel-loader',
  options: {
    cachDirectory: true, // 开启缓存
  }
}
但如果是webpack5
可以配置持久化缓存 以前是没有的
devtool:...
cache: { // 开启持久化缓存
  type: 'filesystem' // 改为 memory会更快
},
entry: ...

entry:…
 optimization: {
 minimize: isEnvProduction, // 生产环境会开启压缩
 minimizer: [
 new TerserPlugin({parallel: true}), // 压缩js 多进程压缩
 new OptimizeCSSAssetsPlugin() // 压缩css
 ],
 splitChunks: …
 }生产环境时文件更小 加载更快
 1.开启tree-sharking
 import {join} from ‘lodash’
 仅仅只会打包join这一个方法
 2.scope-hositing
 将作用域提升 可以减小包的体积
 3.splitChunks
 代码分割 懒加载
 optimization: {
 minimize: isEnvProduction,
 minimizer: [
 new TerserPlugin({parallel: true}),
 new OptimizeCSSAssetsPlugin()
 ],
 splitChunks: {
 chunks: ‘all’, // 支持 asynchronous和同步
 minSize: 0, // 最小大小
 minRemainingSize: 0, //分割出去剩下的大小
 maxSize: 0, // 最大大小
 minChunks: 1, // 最小引用次数
 maxAsyncRequests: 30, // 异步模块最大并发请求数 import(‘…’)
 maxInitialRequests: 30, // 同步模块最大并发请求数 import
 enforceSizeThreshold: 50000, // 如果一个代码块的大小超过这个数就强行打包webpack新属性
 cacheGroups: { // 缓存组
 defaultVendors: { // 第三方的模块如果在node_modules里面的话会进行一个单独的分割
 test: /[\/]node_modules[\/]/,
 priority: -10, // 优先级
 reuseExistingChunk: true // 是否使用已经分割出的代码块
 },
 default: {
 minChunks: 2, // 如果一个模块被引用2次的话 会单独提取为一个代码块
 priority: -20,
 reuseExistingChunk: true
 }
 }
 },
 runtimeChunk: { // 运行时代码 单独分割
 name: entrypoint => runtime-${entrypoint.name} },
 moduleIds: isEnvProduction ? ‘deterministic’ : ‘named’,
 chunkIds: isEnvProduction ? ‘deterministic’ : ‘named’
 }

class App … {
 constructor() {
 …
 this.state = {counter:Map({number:0})};
 }
 add = (amount) => {
 let count = this.state.count.set(‘number’, this.state.count.get(‘number’) + amount);

this.setState(count);
}
render() {
  ...
  return (
    <button onClick={()=>this.add(1)}>
  )
}