webpack打包优化-六虎

打包速度：优化打包速度，主要是进步了咱们的开发功率，更快的打包构建过程，将让你保持一颗愉悦的心

打包体积：优化打包体积，主要是进步产品的运用体验，降低服务器资源成本，更快的页面加载，将让产品显得更加“丝滑”，同时也能够让打包更快

webpack 打包速度优化

webpack 进行打包速度优化有七种常用手段

1. 优化 loader 查找规模

关于 loader 来说，影响打包功率首战之地必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行改变最后再生成新的代码，项目越大，转换代码越多，功率就越低。优化正则匹配、运用 include 和
exclude 指定需求处理的文件,疏忽不需求处理的文件

rules: [{
    // 优化正则匹配
    test: /.js$/,
    // 指定需求处理的目录
    include: path.resolve(__dirname, 'src')
    // 理论上只有include就够了，可是某些状况需求排除文件的时分能够用这个，排除不需求处理文件
    // exclude: []
}]

2. 多进程/多线程

受限于 node 是单线程运行的，所以 webpack 在打包的过程中也是单线程的，特别是在执行 loader 的时分，长期编译的任务
许多，这样就会导致等候的状况。咱们能够运用一些方法将 loader 的同步执行转换为并行，这样就能充分利用系统资源来进步
打包速度了

{
  test: /.js?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: "thread-loader",
      options: {
        workers: 3 // 进程 3 个
      }
    },
    {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env"],
      plugins: ["@babel/plugin-transform-runtime"]
      }
    }
  ]
},

3. 分包

在运用 webpack 进行打包时分，关于依靠的第三方库，比方 vue，vuex 等这些不会修改的依靠，咱们能够让它和咱们自己编写
的代码分隔打包，这样做的好处是每次更改我本地代码的文件的时分，webpack 只需求打包我项目本身的文件代码，而不会再
去编译第三方库，那么第三方库在第一次打包的时分只打包一次，以后只需咱们不升级第三方包的时分，那么 webpack 就不会
对这些库去打包，这样能够快速进步打包的速度。因而为了解决这个问题，DllPlugin 和 DllReferencePlugin 插件就产生了。这种
方法能够极大的削减打包类库的次数，只有当类库更新版本才需求从头打包，而且也完成了将公共代码抽离成独自文件的优化方案

// webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    mode: 'production',
    devtool: false,
    entry: {
        vue: [
            'vue',
            'vue-router',
            'iscroll',
            'vuex'
        ],
    },
    output: {
        path: path.join(__dirname, '../dist'),
        filename: 'lib/[name]_[hash:4].dll.js',
        library: '[name]_[hash:4]'
    },
    performance: {
        hints: false,
        maxAssetSize: 300000, //单文件超越300k，命令行告警
        maxEntrypointSize: 300000, //初次加载文件总和超越300k，命令行告警
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                parallel: true // 敞开多线程并行
            })
        ]
    },
    plugins: [
        new webpack.DllPlugin({
            context: __dirname,
            path: path.join(__dirname, '../dist/lib', '[name]-manifest.json'),
            name: '[name]_[hash:4]'
        })
    ]
}
// webpack.prod.cong.js
plugins: [
    new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require('../dist/lib/vue-manifest.json')
    }),
]

4. 敞开缓存

当设置 cache.type:“filesystem”时，webpack 会在内部以分层方法启用文件系统缓存和内存缓存，将处理结果结存放到内存中，
下次打包直接运用缓存结果而不需求从头打包

{
    type: "filesystem",
    // cacheDirectory 默许途径是 node_modules/.cache/webpack
    // cacheDirectory: path.resolve(__dirname, '.temp_cache')
}

5. 打包剖析东西

显示测量打包过程中各个插件和 loader 每一步所耗费的时刻,然后让咱们能够有针对的剖析项目中耗时的模块对其进行处理。

npm install speed-measure-webpack-plugin -D
// webpack.prod.config.js
const SpeedMeatureWebpackPlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeatureWebpackPlugin();
var webpackConfig = merge(baseWebpackConfig,{})
--> 修改为下面格局
var webpackConfig = {...}
module.exports = webpackConfig
--> 修改为下面格局
module.exports = smp.wrap(merge(baseWebpackConfig, webpackConfig));

6. ignorePlugin

这是 webpack 内置插件, 它的效果是疏忽第三方包指定目录，让这些指定目录不要被打包进去，防止在 import 或 require 调用时，生成以下正则表达式匹配的模块

requestRegExp 匹配（ test ）资源恳求途径的正则表达式。
contextRegExp（可选）匹配（ test ）资源上下文（目录）的正则表达式

new webpack.IgnorePlugin({
   resourceRegExp: /^./test$/,
   contextRegExp: /test$/,
})

7. 优化文件途径

alias：省下查找文件的时刻，让 webpack 更快找到途径
mainFiles：解析目录时要运用的文件名
extensions：指定需求查看的扩展名，装备之后能够不用在 require 或是 import 的时分加文件扩展名,会顺次尝试增加扩展名进行匹配

resolve: {
   extensions: ['.js', '.vue'],
   mainFiles: ['index'],
   alias: {
       '@': resolve('src'),
       }
   }

webpack 打包体积优化

webpack打包体积优化有11种常用优化手段

1. 构建体积剖析

npm run build 构建，会默许翻开： http://127.0.0.1:8888/，能够看到各个包的体积,剖析项目各模块的巨细，能够按需优化。

npm install webpack-bundle-analyzer -D
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
plugins:[
    new BundleAnalyzerPlugin()
]

项目图片资源优化紧缩处理
对打包后的图片进行紧缩和优化，降低图片分辨率，紧缩图片体积等

npm install image-webpack-loader -D
// webpack.base.conf.js
   {
       test: /.(gif|png|jpe?g|svg|webp)$/i,
       type: "asset/resource",
       parser: {
       dataUrlCondition: {
       maxSize: 8 * 1024
       }
   },
   generator: {
      filename: "images/[name].[hash:6][ext]"
   },
   use: [
      {
         loader: "image-webpack-loader",
         options: {
            mozjpeg: {
               progressive: true,
               quality: 65
            },
            optipng: {
               enabled: false
            },
            pngquant: {
               quality: [0.5, 0.65],
               speed: 4
            },
            gifsicle: {
               interlaced: false
            },
            webp: {
               quality: 75
            }
         }
      }
   ]
   }

3. 删去无用的 css 款式

有时分一些项目中可能会存在一些 css 款式被迭代废弃，需求将其删去，能够运用 purgecss-webpack-plugin插件，该插件能够去
除未运用的 css。

npm install purgecss-webpack-plugin glod -D
// webpack.prod.conf.js
const PurgeCSSPlugin = require("purgecss-webpack-plugin");
const glob = require('glob')
const PATHS = {
   src: path.join(__dirname, 'src')
}
// plugins
new PurgeCSSPlugin({
   paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true}),
   safelist: ["body"]
}),

4. 代码紧缩

对 js 文件进行紧缩，然后减小 js 文件的体积，还能够紧缩 html、css 代码。

const TerserPlugin = require("terser-webpack-plugin");
optimization: {
   minimize: true, //代码紧缩
   usedExports:true, // treeshaking
   minimizer:
      [
         new TerserPlugin({
            terserOptions: {
               ecma: undefined,
               parse: {},
               compress: {},
               mangle: true, // Note `mangle.properties` is `false` by default.
               module: false,
               // Deprecated
               output: null,
               format: null,
               toplevel: false,
               nameCache: null,
               ie8: false,
               keep_classnames: undefined,
               keep_fnames: false,
               safari10: false
            }
         })
      ],
   splitChunks:
      {
         cacheGroups: {
            commons: {
               name: "commons",
               chunks: "initial",
               minChunks: 2
            }
         }
      }
}

5. 敞开 Scope Hoisting

Scope Hoisting又译作“效果域进步”。只需在装备文件中增加一个新的插件，就能够让 webpack 打包出来的代码文件更小、运行
的更快, Scope Hoisting会剖析出模块之间的依靠关系，尽可能的把打包出来的模块合并到一个函数中去，然后适当地重命名一
些变量以防止命名抵触。
new webpack.optimize.ModuleConcatenationPlugin();

6. 提取公共代码

将项目中的公共模块提取出来，能够削减代码的冗余度，进步代码的运行功率和页面的加载速度。
new webpack.optimize.CommonsChunkPlugin(options);

7. 代码别离

代码别离能够将工程代码别离到各个文件中，然后按需加载或并行加载这些文件，也用于获取更小的 bundle，以及操控资源加
载优先级,在装备文件中装备多进口，输出多个 chunk。
//多进口装备终究输出两个chunk

module.exports = {
   entry: {
      index: 'index.js',
      login: 'login.js'
   },
   output: {
      //关于多进口装备需求指定[name]不然会呈现重名问题
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
   }
};

8. Tree-shaking

treeshaking是一个术语，一般用于描述移除 JavaScript 上下文中的未引证代码（ dead-code ）。它依靠于 ES2015 模块语法的静
态结构特性，例如 import 和 export。

9. CDN 加快

CDN 的全称是 Content DeliveryNetwork，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边际
服务器，经过中心平台的负载均衡、内容分发、调度等功能模块，运用户就近获取所需内容，降低网络拥塞，进步用户访问响
应速度和命中率。CDN 的关键技能主要有内容存储和分发技能。在项目中以 CDN 的方法加载资源，项目中不需求对资源进行
打包，大大削减打包后的文件体积

10. 出产环境封闭 sourceMap

sourceMap 本质上是一种映射关系，打包出来的 js 文件中的代码能够映射到代码文件的具体位置,这种映射关系会协助咱们直接找到在源代码中的错误。但这样会使项目打包速度减慢，项目体积变大，能够在出产环境封闭 sourceMap

11. 按需加载

在开发项目的时分，项目中都会存在十几甚至更多的路由页面。假如咱们将这些页面悉数打包进一个文件的话，虽然将多个请
求合并了，可是同样也加载了许多并不需求的代码，耗费了更长的时刻。那么为了页面能更快地呈现给用户，咱们肯定是希望
页面能加载的文件体积越小越好，这时分咱们就能够运用按需加载，将每个路由页面独自打包为一个文件。以下是常见的按需
加载的场景

* 路由组件按需加载
* 按需加载需引进第三方组件
* 关于一些插件，假如只是在个别组件顶用的到，也能够不要在 main.js 里边引进，而是在组件中按需引进

webpack打包优化

webpack 打包速度优化

1. 优化 loader 查找规模

2. 多进程/多线程

3. 分包

4. 敞开缓存

5. 打包剖析东西

6. ignorePlugin

7. 优化文件途径

webpack 打包体积优化

1. 构建体积剖析

3. 删去无用的 css 款式

4. 代码紧缩

5. 敞开 Scope Hoisting

6. 提取公共代码

7. 代码别离

8. Tree-shaking

9. CDN 加快

10. 出产环境封闭 sourceMap

11. 按需加载

作者信息

推广

webpack打包优化

webpack 打包速度优化

1. 优化 loader 查找规模

2. 多进程/多线程

3. 分包

4. 敞开缓存

5. 打包剖析东西

6. ignorePlugin

7. 优化文件途径

webpack 打包体积优化

1. 构建体积剖析

3. 删去无用的 css 款式

4. 代码紧缩

5. 敞开 Scope Hoisting

6. 提取公共代码

7. 代码别离

8. Tree-shaking

9. CDN 加快

10. 出产环境封闭 sourceMap

11. 按需加载

相关文章

工作了一年半的前端，想要改变，软件开发者职业生涯—第一章《改变》

跨平台还能怎么玩？试试 Kotlin Multiplatform Mobile

CTR代码实现6-深度ctr模型 后浪 xDeepFM/FiBiNET

开发一个时间小程序

作者信息

推广

CTR代码实现6-深度ctr模型后浪 xDeepFM/FiBiNET