webpack babel 配置优化(待。。。)

·  阅读 151

代码压缩

1、js 文件压缩

内置uglifyjs-webpack-plugin

2、css 文件压缩

使用optimie-css-assets-webpack-plugin

使用cssnano

modules.exports = {
  entry: {
    app: './scr/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name][chunkhash:8].js',
    path: __dirname + '/dist'
  },
  plugins: [
    new OptimizeCSSAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano')
    })
  ]
} 

复制代码

3、html 文件压缩 修改html-webpack-plugin, 设置压缩参数。

module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name][chunkhash:8].js',
path: __dirname + '/dist'
},

plugins: [
 new HtmlWebpackPlugin({
     template: path.join(__dirname, 'src/search.html’),
     filename: 'search.html’,
     chunks: ['search’],
     inject: true,
     minify: {
         html5: true,
         collapseWhitespace: true,
         preserveLineBreaks: false,
         minifyCSS: true,
         minifyJS: true,
         removeComments: false
     }
 })
]
};
复制代码

基础库分离

将 react、react-dom 基础包通过 cdn 引⼊,不打⼊ bundle 中 方法:html-webpack-externals-plugin.

const HtmlWbpcakExternalsPlugin = require('html-webpack-externals-plugin');
...
plugins: [
  new HtmlWebpackExternalsPlugin({
    externals: [
      {
        module: 'react',
        entry: '../react',
        global: 'React',
      },
      {
        module: 'react',
        entry: '../react',
        global: 'ReactDom'
    }
    ]
  })
]
复制代码

image.png

公共脚本分离

利用SplitChunksPlugin 进行公共脚本分离

chunks 参数说明:

· async 异步引⼊的库进⾏分离(默认)

· initial 同步引⼊的库进⾏分离

· all 所有引⼊的库进⾏分离(推荐)

modules.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
         test: /[\\/]node_modules[\\/]/,
         priority: -10
        }
      }
    }
  }
}
复制代码

利⽤ SplitChunksPlugin 分离基础包

module.exports = {
  optimization: {
     splitChunks: {
       cacheGroups: {
         commons: {
           test: /(react | react-dom)/,
           chunks: 'all'
         }
       }
     }
  }
}
复制代码

利⽤ SplitChunksPlugin 分离⻚⾯公共⽂件

minChunks: 设置最小引用次数2

minSize: 分离包最小体积

module.exports = {
  optimization: {
    splitChunks: {
      minSize: 0,
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'all',
          minChunks: 2
        }
      }
    }
  }
}
复制代码

tree Shaking 删除容易代码

概念:1 个模块可能有多个⽅法,只要其中的某个⽅法使⽤到了,则整个⽂件都会被打到bundle ⾥⾯去,tree shaking 就是只把⽤到的⽅法打⼊ bundle ,没⽤到的⽅法会在uglify 阶段被擦除掉。

webpack配置: webpack 默认⽀持,在 .babelrc ⾥设置 modules: false 即可 production mode的情况下默认开启

要求:必须是 ES6 的语法,CJS 的⽅式不⽀持。

利⽤ ES6 模块的特点:

·只能作为模块顶层的语句出现

· import 的模块名只能是字符串常量

· import binding 是 immutable的

多进程/多实例:使用 HappyPack 解析资源

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改