webpack异步路由-webpack常用插件

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

webpack常用的开发插件

1.clean-webpack-插件

运行webpack build时，首先清除打包文件夹

请注意，它是作为对象方法接收的

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
plugins: [
    new CleanWebpackPlugin(),
  ]

2. html-webpack-插件

模板文件，动态创建模板文件

主要的意思

js可以动态导入，因为每个包后的js的hash值可能不同，可以根据具体的hash值导入js

const HtmlWebpackPlugin = require("html-webpack-plugin")
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      title: 'czklove',
      filename: 'index.html',
      chunks: '[name].bundle[hash].js'
    })
  ]

3.HotModuleReplacementPlugin模块热替换插件

Webpack内置了一个插件，可以方便地配置和使用。功能是提供保存后页面刷新更改内容的功能

new webpack.HotModuleReplacementPlugin()

4.最重要的插件，SplitChunksPlugin，代码分割插件

optimization: {
    splitChunks: {
      chunks: 'initial', // 分割方式 async, all ，initial
      minSize: 30000, //分割后的文件最小值
      minChunks: 1, // 最小引用次数
      maxAsyncRequests: 5, // 异步的最大分割数
      maxInitialRequests: 3, // 初始模块的最大分割数
      automaticNameDelimiter: '~', // 分割后的名字用什么符号链接
      name: true,
      cacheGroups: { //缓存组
        venxx: {
          test: /vue/,
          name: 'vuevendors'
        },
        vendors: {
          test: /jquery/,
          name: 'jqueryvendors'
        }
      }
    }
  },

主要的意思

1、做代码拆分，默认是将所有异步导入单独打包，比如常见的Vue异步路由组件

2.单独封装不经常改变的模块代码，这样更有利于浏览器的缓存处理，比如vue vuex vue-routerwebpack异步路由webpack异步路由，ui库，这些不经常改变

3、业务代码单独打包，不时变化

4、异步模块代码单独打包并预加载，加快首页加载速度

如果项目太大，打包混乱时间太长，可以考虑使用HappyPack插件启用多进程打包（不是多线程，js是单线程）

plugins: [
      new HappyPack({
        id: 'babel', // 与loader 配置项对应
        threads: 4, // 开启多少个进程
        loaders: ['babel-loader'] //用什么loader处理
      })
    ]