zoukankan      html  css  js  c++  java
  • 打包文件太大

    一般情况下,直接require第三方库,比如jquery,然后webpack会自动把第三方库打包进bundle.js里面去,这样就造成了三个问题:

    1. bundle.js的文件会非常大
    2. 每次更新bundle.js的时候根本没有更新第三方库,但是用户仍然要下载包含所有第三方库的bundle.js,不利于缓存
    3. 更新第三方库的时候很麻烦,又要重新下bundle.js。(虽然这种情况很少)

     这里暂且提出一个解决方案

      在webpack.prod.conf.js中写入如下代码:

    let checksArray = {
       //例如:
      'element-ui': ['element-ui'],
    }
    
    let plugsArray = []
    Object.keys(checksArray).forEach((key1, index1) => {
      let modules = []
      Object.keys(checksArray).forEach((key2, index2) => {
        if (index1 <= index2) {
          modules = modules.concat(Array.isArray(checksArray[key2])?checksArray[key2]:[checksArray[key2]])
        }
      })
    
      let minChunks = (function (modules) {
        return function (module) {
          let result = false
          modules.forEach((name)=>{
            result = result || module.resource.toLowerCase().indexOf(name) !== -1
          })
          return (
            module.resource &&
            /.js$/.test(module.resource) &&
            module.resource.indexOf(
              path.join(__dirname, '../node_modules'),
            ) === 0 && result
          )
        }
      }(modules))
    
      let plugs = new webpack.optimize.CommonsChunkPlugin({
        name: key1,
        minChunks,
      })
      plugsArray.push(plugs)
    })
    
    const webpackConfig = merge(baseWebpackConfig, {
      plugins: [
        ...plugsArray,
      ],
    })

    即可对代码的包进行分割。

  • 相关阅读:
    zendstuido10 配置spket插件
    Extjs各版本的下载链接
    主题:Android、iPhone和Java三个平台一致的加密工具
    TestDisk 恢复rm -rf 的文件
    java实现定时任务的三种方法
    mac 下安装 lua5.3 + cjson
    Mac OS X 上Lua的安装方法
    Channel States
    JSON常见操作
    微信小程序——获取元素的宽高等属性
  • 原文地址:https://www.cnblogs.com/zhouyideboke/p/10519114.html
Copyright © 2011-2022 走看看