webpack 手摸手学习系列之性能优化的 HRM、source-map 和 oneOf

最新推荐文章于 2024-05-12 19:45:28 发布
最新推荐文章于 2024-05-12 19:45:28 发布
阅读量502 收藏
点赞数
分类专栏： Webpack、Vite、Gulp 文章标签： webpack 手摸手学习系列 性能优化 HRM、source-map oneOf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42614080/article/details/106438562
版权
一、webpack 性能优化之 HRM

  1. 创建空文件夹，通过 npm init 命令初始化 package.json 文件，通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli，通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli，通过 npm i style-loader css-loader -D 命令下载 style-loader 和 css-loader，通过 npm i less less-loader -D 命令下载 less 和 less-loader，通过 npm i html-webpack-plugin -D 命令下载 html-webpack-plugin 插件，通过 npm i url-loader file-loader -D 命令下载 url-loader 和 file-loader，通过 npm i html-loader -D 命令下载 html-loader。

  2. 创建 src 文件夹，在里面创建 css、js、imgs 和 media 文件夹，以及 index.html。css 文件夹中放 index.less 和字体图标资源样式，js 文件夹中放 index.js和 print.js，imgs 文件夹中放图片资源，media 文件夹放字体图标的相关资源，代码如下所示：

  • index.less

    #box {
    width: 200px;
    height: 200px;
    background-image: url('../imgs/angular.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

  • index.js

    // 引入
import print from './print.js';
import '../css/iconfont.css';
import '../css/index.less';


console.log('index.js 文件被加载')

print()

function add(x, y) {
  return x + y;
}

console.log(add(1, 2));

if (module.hot) {
  module.hot.accept('./print.js', function () {
    print();
  })
}

  • print.js

    // 引入
import print from './print.js';
import '../css/iconfont.css';
import '../css/index.less';


console.log('index.js 文件被加载')

print()

function add(x, y) {
  return x + y;
}

console.log(add(1, 2));

if (module.hot) {
  module.hot.accept('./print.js', function () {
    print();
  })
}

  • index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发环境</title>
</head>
<body>
    <h1>开发环境配置</h1>
    <span class="iconfont icon-icon-test"></span>
    <span class="iconfont icon-icon-test2"></span>
    <span class="iconfont icon-icon-test3"></span>
    <span class="iconfont icon-icon-test1"></span>
    <div id="box"></div>
    <img src="./imgs/vue.jpg" alt="vue">
    <img src="./imgs/react.png" alt="react">
</body>
</html>
  1. 创建 webpack.config.js 文件，通过 require 引入 path 和 html-webpack-plugin，entry 是入口文件，output 是出口文件，filename 是打包输出后的文件名，path 是输出路径。module 是 loader 的配置，rules 是详细的 loader 配置。第一个规则是处理 less 资源，匹配以 .less 结尾的文件，使用的 loader 是 style-loader、css-loader 和 less-loader。第二个规则是处理 css 资源， 匹配以 .css 结尾的文件，使用的 loader 是 style-loader 和 css-loader。第三个规则是处理图片资源，匹配以 jpg、png 和 gif 结尾的文件图片资源，使用的 loader 是 url-loader，进行 options 配置，limit 是限制图片的大小小于8kb，就会被base64处理，给图片做优化，name 给图片做重命名，取 hash 值的前 10 位，取文件的原来扩展名，关闭 es6 模块化，输出路径为 imgs。第四个规则是 处理 html 中的 img 资源，匹配以 .html 结尾的文件，使用的 loader 是 html-loader。由于处理图片资源采用的是 ES6 module 解析，而 html 文件中的 img 资源使用 commonJS 解析，会造成冲突，需要关闭 ES6 module。第五个规则是处理其它资源，使用 exclude 不包括上面的所有资源，html|css|js|less|jpg|png|gif，使用 file-loader，通过 options 配置 name 的值为取 hash 值的前 10 位，取文件的原来扩展名，通过 outputPath 设置输出路径为 media。plugins 里面是一些插件配置，通过 new HtmlWebpackPlugin()，复制里面的文件，并自动引入打包输出的所有资源（JS/CSS），设置 mode 模式为 development 开发模式。在 devServer 中，contentBase 是项目构建后路径，compress 是启动 gzip 压缩，port 是端口号，open 是自动打开浏览器，hot 是开启 HRM 功能，代码如下所示：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: ['./src/js/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true
  }
};
  1. HMR 是 hot module replacement，热模块替换，也可以说是模块热替换。作用是一个模块发生变化，只会重新打包这一个模块，而不是打包所有模块，极大提升构建速度，HRM 在样式文件、JS 文件和 HTML 文件的不同应用：
  • 样式文件：可以使用 HMR 功能，因为 style-loader 内部实现了
  • JS 文件：默认不能使用 HMR 功能，需要修改 js 代码，添加支持 HMR 功能的代码。注意的是，HMR 功能对 js 的处理，只能处理非入口 js 文件的其他文件，添加代码， 全局寻找 module 这个变量，有没有 hot 这个属性，一旦 module.hot 为 true，说明开启了 HMR 功能，方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建，会执行后面的回调函数，如下所示：
if (module.hot) {
  module.hot.accept('./print.js', function () {
    print();
  })
}
  • HTML 文件：默认不能使用 HMR 功能.同时会导致问题，html 文件不能热更新了，不用做 HMR 功能。如果需要做，修改 entry 入口，将 html文件引入，代码如下所示：
entry: ['./src/js/index.js', './src/index.html']
  1. 在命令行输入 npx webpack-dev-server 命令，项目就会自动打包编译。每次在更改完代码后，自动编译看到最新的显示内容。在 build 打包文件中，也可以看到打包后的 css、js、imgs 和 media 文件夹，以及 index.html。
二、webpack 性能优化之 source-map
  1. 在上面 HRM 热模块替换的项目中，修改 webpack.config.js 文件，添加 devtool 来指定不同的 source-map，代码如下所示：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: ['./src/js/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true
  },
  devtool: 'eval-source-map'
};
  1. source-map 是一种 提供源代码到构建后代码映射 技术，如果构建后代码出错了，通过映射可以追踪源代码错误，不同 source-map 之间的比较，如下所示：
类型类型描述类型方式
source-map错误代码准确信息和源代码的错误位置外部
inline-source-map只生成一个内联source-map，错误代码准确信息和源代码的错误位置内联
hidden-source-map错误代码错误原因，但是没有错误位置，不能追踪源代码错误，只能提示到构建后代码的错误位置外部
eval-source-map每一个文件都生成对应的source-map，都在eval，错误代码准确信息 和源代码的错误位置内联
nosources-source-map错误代码准确信息, 但是没有任何源代码信息外部
cheap-source-map错误代码准确信息 和 源代码的错误位置，只能精确的行外部
cheap-module-source-map错误代码准确信息 和 源代码的错误位置，module会将loader的source map加入外部
  1. 内联和外部的区别：
  • 外部生成了文件，内联没有
  • 内联构建速度更快

  1. 开发环境需要速度快，调试更友好。在速度快中，eval>inline>cheap>...，而 eval-source-map 优于 eval-cheap-souce-map。在调试友好中，cheap-souce-map 优于 cheap-module-souce-map。所以，在开发环境中，最快调试，调试更加友好，可以选择 eval-source-map 或者是 eval-cheap-module-souce-map。

  2. 在生产环境中，需要考虑源代码的隐藏和调试的友好。内联会让代码体积变大，所以在生产环境不用内联。nosources-source-map 是全部隐藏， hidden-source-map 是只隐藏源代码，会提示构建后代码错误信息。所以，在生成环境中，可以选择 source-map 或者是 cheap-module-souce-map。

  3. 在命令行输入 npx webpack-dev-server 命令，项目就会自动打包编译。每次在更改完代码后，自动编译看到最新的显示内容。在 build 打包文件中，也可以看到打包后的 css、js、imgs 和 media 文件夹，以及 index.html。

三、webpack 性能优化之 oneOf

  1. 创建空文件夹，通过 npm init 命令初始化 package.json 文件，通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli，通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli，通过 npm i html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin -D 命令下载 html-webpack-plugin、mini-css-extract-plugin 和 optimize-css-assets-webpack-plugin，通过 npm i eslint-loader eslint -D 命令下载 eslint-loader 和 eslint，通过 npm i eslint-config-airbnb-base eslint-plugin-import eslint -D 命令下载 eslint-config-airbnb-base 、eslint-plugin-import 和 eslint，eslint-config-airbnb-base 依赖于 eslint-plugin-import 和 eslint，通过 npm i postcss-loeader postcss-preset-env -D 命令下载 postcss-loeader 和 postcss-preset-env，通过 npm i css-loader less-loader -D 命令下载 css-loader 和 less-loader，通过 npm i url-loader file-loader html-loader -D 命令下载 url-loader、file-loader 和 html-loader，通过 npm i babel-loader @babel/core @babel/preset-env -D 命令下载 babel-loader、@babel/core 和 @babel/preset-env，通过 npm i @babel/polyfill core-js -D 命令下载 @babel/polyfill 和 core-js。

  2. 创建 src 文件夹，在里面创建 index.js 、 index.html、a.css 和 b.css 文件，代码如下所示：

  • index.js
    import '../css/a.css';
import '../css/b.css';

function add(x, y) {
  return x + y;
}

console.log(add(2, 5));
  • index.html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1>hello webpack</h1>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>
  • a.css
    #box1 {
    width: 100px;
    height: 100px;
    background-color: pink;
}
  • b.css
    #box2 {
    width: 200px;
    height: 200px;
    background-color: deeppink;
}
  1. 创建 webpack.config.js 文件，通过 require 引入 path 、 html-webpack-plugin 、 mini-css-extract-plugin和 optimize-css-assets-webpack-plugin。通过 process.env.NODE_ENV 定义 nodejs 环境变量：决定使用 browserslist 的哪个环境。定义一个复用 loader，在下面匹配 .css 和 .less 文件的时候，需要重复使用。通过 MiniCssExtractPlugin.loader 提取 css 单独文件，使用 css-loader，使用 postcss-loader 做 css 的兼容性处理，同时使用 postcss-preset-env 做 css 的按需加载的兼容性处理，options 是 postcss-loader 的配置项，ident 是固定写法，plugins 是使用 postcss-preset-env 这个插件。entry 是入口文件，output 是出口文件，filename 是输出的文件名，path 是文件的输出路径。module 是 loader 的配置，rules 是详细的 loader 配置。在 rules 中使用 oneOf，以下的 loader 只会匹配一个，不能有两个配置处理同一种类型文件，如果有需要提取出来。第一个规则是匹配以 .css 结尾的文件，通过 use 使用 commonCssLoader 这个抽出复用的 loader。第二个规则是匹配以 .less 结尾的文件，通过 use 使用 commonCssLoader 这个抽出复用的 loader 和 less-loader。第三个规则是匹配以 .js 结尾的文件，通过 exclude 不包括 node_modules，通过 enforce 优先执行，通过 loader 使用 eslint-loader，通过 options 设置自动修复 eslint 的错误。第四个规则是匹配以 .js 结尾的文件，通过 exclude 不包括 node_modules，通过 loader 使用 babel-loader，通过 options 进行配置，presets 为预设，指示 babel 做怎么样的兼容性处理，使用 babel/preset-env 这个预设。通过 useBuiltIns 按需加载，通过 corejs 指定 core-js 版本，通过 targets 指定兼容性做到哪个版本浏览器。js 兼容性处理需要使用到 babel-loader、@babel/core 和 @babel/preset-env。如果是基本 js 兼容性处理，需要使用 @babel/preset-env，但是只能转换基本语法，如promise高级语法不能转换。如果使用全部 js 兼容性处理，需要使用 @babel/polyfill ，但是只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了，所有就需要做兼容性处理的就做做兼容性处理的就做，使用 core-js。第五个规则是匹配以 .jpg、png 和 gif 格式的图片资源，通过 loader 使用 url-loader，url-loader 依赖于 file-loader。进行 options 配置，设置 limit 为 8 * 1024，图片大小小于 8kb，就会被 base64 处理，给图片做优化。这样做的优点是减少请求数量（减轻服务器压力），缺点是图片体积会更大（文件请求速度更慢）。设置 esModule 为 false，由于 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs ，解析时会出问题为 [object Module]，所以关闭 url-loader的 es6 模块化，使用commonjs 解析。设置 name 为 [hash:10].[ext]，给图片进行重命名，因为图片值为 hash，[hash:10] 取图片的 hash 的前 10 位，[ext]取文件原来扩展名。第三个规则是匹配以 .html 结尾的文件，使用 loader 为 html-loader，处理 html 文件的 img 图片（负责引入 img，从而能被 url-loader 进行处理）。第六个规则是匹配以 .html 结尾的文件，通过 loader 使用 html-loader。第七个规则是匹配其它资源，通过 loader 使用 file-loader，通过 options 进行输出路径配置，输出文件夹为 media。plugins 里面是一些插件配置，通过 MiniCssExtractPlugin 插件提取 css 以及对输出的 css 文件进行重命名，通过 OptimizeCssAssetsWebpackPlugin 对 css 文件进行压缩，通过 HtmlWebpackPlugin 复制里面的文件，并自动引入打包输出的所有资源（JS/CSS），进行 minify 配置，通过 collapseWhitespace 移除空格，通过 removeComments 移除注释，压缩 html 文件。设置 mode 为 production，在生产环境下 webpack 会自动压缩 js 代码，代码如下所示：

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

process.env.NODE_ENV = 'production'


const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                require('postcss-preset-env')()
            ]
        }
    }
]

module.exports = {
    entry: 'src/js/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                enforce: 'pre',
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            },
            {
                oneOf: [
                    {
                        test: /\.css$/,
                        use: [...commonCssLoader]
                    },
                    {
                        test: /\.less$/,
                        use: [...commonCssLoader, 'less-loader']
                    },
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',       
                                {
                                    useBuiltIns: 'usage',
                                    corejs: {
                                        version: 3
                                    },
                                    targets: {
                                        chrome: '60',
                                        firefox: '60',
                                        ie: '9',
                                        safari: '10',
                                        edge: '17'
                                    }
                                }
                            ]
                        }
                    },
                    {
                        test: /\.(jpg|png|gif)/,
                        loader: 'url-loader',
                        options: {
                            limit: 8 * 1024,
                            name: '[hash:].[ext]',
                            outputPath: 'imgs',
                            esModule: false
                        }
                    },
                    {
                        test: /\.html$/,
                        loader: 'html-loader'
                    },
                    {
                        test: /\.(js|css|less|html|jpg|png|gif)/,
                        loader: 'file-loader',
                        options: {
                            outputPath: 'media'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],
    mode: 'production'
}
  1. 在 package.json 这个文件中，进行配置 browserslist，在 css 兼容处理的时候，需要帮 postcss 找到 package.json 中 browserslist 里面的配置，通过配置加载指定的css兼容性样式，development 为开发环境配置，last 1 chrome version 表示兼容最近的 chrome 版本，last 1 firefox version 表示兼容最近的 firefox 版本，last 1 safari version 表示兼容最近的 safari 版本。production 为生产环境配置，>0.2% 表示大于 99.8% 的浏览器，not dead 表示不要已经死的浏览器，not op_mini all 表示不要使用 op_mini all 浏览器。 eslint 并不知道要检查什么，所有就有 airbnb 风格指南，airbnb 需要使用 eslint-config-airbnb-base 这个库，这个库依赖于 eslint-plugin-import 和 eslint。所有需要在 package.json 中 eslintConfig 中设置检查规则，设置 extends 为 airbnb-base，代码如下所示：
"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  }
  1. 在命令行输入 webpack 命令，资源就会进行打包，以及相应的压缩代码。
城南花开ze
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack生产环境性能优化打包构建速度-oneOf
mus-z的博客
07-30 437
在加载loader时候，默认每个文件都会被所有的rules检查，但我们很多文件都只需要一条rules就可以解析完成，这无疑减慢了打包效率，因此可以考虑使用rules的oneOf规则，可以保证文件从oneOf里面的规则从上到下检查，满足一个rule之后就可以不进行下面的loader（需要做好顺序，而且不能同一个文件需要两个loader规则同时处理 所以如果有两个文件都需要不同的rule处理的时候把其中一个loader提取到oneOf外面，就可以了 比如对于js文件的eslint-loader和babelloa
source-map-loader:从模块中提取 sourceMappingURL 注释并将其提供给 webpack
08-04
入门首先，您需要安装source-map-loader ： npm i -D source-map-loader 然后将插件添加到您的webpack配置中。 例如： 文件.js import css from "file.css" ; webpack.config.js module . exports = { module : { ...
webpack优化之oneof
An滴饭儿的博客
11-16 2363
正常来讲，所有文件在执行的时候，都要将loader中的rules过一遍，如果符合，就被对应loader处理，不符合则直接过。这样对性能不好，为了解决这个问题，使用ondeof。 作用：提升构建速度，避免每个文件都被所有loader过一遍，因为任何一个文件，构建过程中，在遇到第一个与之对应的loader后，不会再往下进行。 oneOf里面的loader只匹配一个。不能有两个配置处理同一种类型的文件，如下图，两个Loader，一个eslint，一个babel，他们都处理Js文件，那只会第一个生效，第二个不起作用
2024年前端最全webpack生产环境性能优化打包构建速度-oneOf，实用面试技巧
最新发布
2401_84620303的博客
05-12 793
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件//html模板//提取出css//压缩css。
webpack优化系列(3)-oneOf
ysj1218的博客
03-01 722
正常来讲，一个文件只能被一个loader处理。当一个文件要被多个loader处理，那么一定指定loader执行的先后顺序：比如js文件先执行 eslint 再执行 babel 问题：一个文件被所有设置的loader过一遍，当然了，有的loader处理不了，有的loader就命中，这样不太好，那么现在呢就可以用 oneOf 将所有的rules设置包裹进去，表示loader只会匹配一个 注意：不能有两个配置处理同一种类型文件。比如：eslint-loader和babel-loader都处理同一种文件类型.
【Webpack 性能优化系列(3) - oneOf】
圆圆的 JavaScript 博客
08-31 1562
我们在写loader的时候，`rules`里面有非常非常多的loader规则，但是每个文件只能匹配一个 loader，被一个 loader 处理，因此可以使用 oneOf 唯一匹配，不需要每个文件把所有的 loader 都询问一遍，这样可以提高 loader 的执行效率
webpack当中的oneOf用法以及tree-shaking
m0_68997646的博客
02-18 785
webpack当中的oneOf用法以及缓存解决方法
stack-source-map：添加对错误堆栈的源映射支持（仅Chrome）
02-04
适用于babel和webpack :grinning_face_with_big_eyes: 安装 npm install stack-source-map 用法 require ( 'stack-source-map' ) ( ) Webpack条目 var entry = [ 'stack-source-map/register' // other entries ...
webpack学习教程之前端性能优化总结
10-18
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）...这篇文章主要给大家总结介绍了关于webpack学习教程之前端性能优化的相关资料，需要的朋友可以参考下。
rollbar-sourcemap-webpack-plugin：一个Webpack插件，用于将源地图上传到Rollbar
02-06
RollbarSourceMapPlugin 这是一个插件，可简化从webpack构建生成的源地图上传到。 生产JavaScript捆绑包通常会在部署之前缩小，这会使Rollbar堆栈... 此插件不再与Webpack 3和更早版本兼容。 安装 使用npm安装插件
14. webpack优化配置-oneOf
草木红的博客
08-18 386
转载：https://segmentfault.com/a/1190000022413668 优化点: 每个不同类型的文件在loader转换时，都会被命中，遍历module中rules中所有loader const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plug
webpack开发环境性能优化之优化打包构建速度-HRM
mus-z的博客
07-30 425
修改部分文件的时候其他文件也会重新打包，肯定会影响打包速度因此就需要HRM热模块替换 只会打包某一个模块而不是所有都重新打包 样式文件在使用style-loader的情况下可以使用HRM js文件默认不使用HRM，需要自动刷新：需要修改js文件实现热加载 html不能随之热加载，也不会自动刷新（修改entry入口，改成数组引入html），pwa不做HRM const path = require('path'); const HtmlWebpackPlugin = require('html-webp
Webpack系列——热模块更新HRM
Smart_J_King的博客
01-12 429
热模块更新HRM(Hot Module Replacement) 运行 npm run start，此时，我们尝试对文件进行修改，然后回到页面，你会发现终端内 webpack 帮我们重新编译了代码，然后它会自动刷新，刷新后的页面被重置，之前在页面上的操作不见了，又要重新开始。 我们想要的效果是，当文件修改重新编译后，页面不要全部刷新，只是响应发生变化的那一部分。这时候就要用到 HMR，热模块替换。 注意：HMR 相当于 dev Server 的辅助，同样只用在开发环境，不要用在生产环境中！！！
webpack-OneOf优化生产环境的打包构建速度；优化loader
zhangyubababa的博客
02-23 201
webpack-HRM 热模块替换
zhangyubababa的博客
02-23 137
webpack2.x基础属性讲解(一)
weixin_34309435的博客
04-04 104
webpack作为构建工具平时作为前端作为优化、模块编程、和分片打包的重要组成部分,大家可能并不陌生，如果没有时刻的去关注文档，那么大家可能不太清楚webpack已经默默然的升级到2.x了，对比1.x版本，webpack2的文档结构和代码提示都非常友善。 webpack从1.x升到2版，并没有作为大的更改改动，而且内部的接口文档形式也与1基本无修改，那么对比webpack2版本 我们对we...
【webpack】HRM模块热替换原理
qq_53512708的博客
11-24 223
webpack的HRM模块热替换过程及原理
Webpack高级学习：OneOf——匹配上一个 loader, 剩下的就不匹配了
weixin_47295886的博客
03-24 225
原因实际没有处理上，但是都要过一遍。所以使用OneOf，匹配上一个 loader, 剩下的就不匹配了。开发模式和生产模式都可以用。打包时每个文件都会经过所有 loader 处理，虽然因为。一个匹配上了就不看后面的——生产模式开发模式都可以用。
webpack性能优化——source-map
雨的印记的博客
02-22 224
webpack.config.js 文件来配置 webpack const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // 引入 html 文件，解决 html 文件不能热更新的问题 entry: ['./src/js/index.js', './src/index.html'], output: { fi.
WM_04_模块化原理和source-map1
08-04
根据不同的mode设置，Webpack会自动进行一系列的代码优化和压缩，以便在生产环境和开发环境中获得最佳的代码性能和体验。 通过配置mode，我们可以更好地控制Webpack的输出结果，实现打包后的代码更小、加载更快，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值