webpack的优化

UNDEFINED
68 阅读1分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

1. Webpack的作用

  1. 模块打包: 将不同模块的文件打包整合到一起
  2. 编译兼容:
  3. 能力扩展: 通过Plugin,可以实现按需加载,代码压缩等
  4. webpack默认只能处理json和js模块，对于其它的模块它需要对应的loader来处理

2. 基本配置

  1. mode: 设置打包方式 ( 开发: development; 生产: production )
  1. 入口( entry ) 默认入口文件的地址是: src/index.js
  1. 出口( output ) 默认出口文件的地址是: dist/main.js
  1. devtool: 作用 是以哪种方式生成sourcemap文件

sourcemap文件: 映射源文件与目标文件之间对应关系, 好处是当错误发生(调试)时, 找到源文件的位置

3. Loader

module.exports = {
	module: {
		rules: [
    	{
        test: /.(js|jsx|mjs)$/,  //用以匹配loaders所处理文件的拓展名的正则表达式(必须)
        enforce: 'pre',
        use: [  // 用来处理此模块的loader
          {
            options: {
              formatter: eslintFormatter,
              eslintPath: require.resolve('eslint'),
              
            },
            loader: require.resolve('eslint-loader'),  // loader的名称(必选)
          },
        ],
        include: paths.appSrc,// include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
      },
    ]  
  }
}

常见的loader:
css-loader   // 只是能让你在.js中通过import来引入.css
style-loader  // 以style标签的方式插入到html页面
less-loader  // 处理less
postcss-loader // 自动补全浏览器前缀
file-loader  //处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片；使用file-loader打包的图片会给每张图片都生成一个随机的hash值作为图片的名字；
url-loader  //也是处理图片类型资源，只不过它与file-loader有一点不同，url-loader可以设置一个根据图片大小进行不同的操作，如果该图片大小大于指定的大小，则将图片进行打包资源，否则将图片转换为base64字符串合并到js文件里

4. Plugin

拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务

常用plugin
 html-webpack-plugin可以根据模板自动生成html代码，并自动引用css和js文件

 clean-wenpack-plugin 会在打包之前将我们指定的文件夹清空应用场景每次打包前将dist目录清空, 然后再存放新打包的内容, 避免新老混淆问题

 uglifyjs-webpack-plugin：压缩js代码

5. 优化

loader优化

cache-loader 缓存 less-loader

npm install --save-dev thread-loader
npm install --save-dev cache-loader
const threadLoader = require('thread-loader');

// 缓存 css-loader,在工作池中运行以下加载程序

// cache-loader 和，使用起来也很简单，仅仅需要在一些性能开销较大的 loader 之前添加此 loader，以将结果缓存到磁盘里，显著提升二次构建速度。
  use: [
        {
          loader: 'cache-loader',
        },
        {
          loader: 'thread-loader'
        },
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            minimize: true,
            sourceMap: shouldUseSourceMap,
          },
        },

// 预热 
threadLoader.warmup({
  // pool options, like passed to loader options
  // must match loader options to boot the correct pool
}, [
  // modules to load
  // can be any module, i. e.
  'css-loader',
  'postcss-loader',
  'less-loader',
]);

结果: 从30S优化到15S, 优化了50%

插件优化

UglifyJsPlugin

ExtractTextPlugin

// 安装 webpack-parallel-uglify-plugin 插件
npm i -D webpack-parallel-uglify-plugin


 // 使用 ParallelUglifyPlugin 并行压缩输出JS代码(代替UglifyJsPlugin)
    new ParallelUglifyPlugin({
      // 传递给 UglifyJS的参数如下：
      uglifyJS: {
        output: {
          /*
           是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
           可以设置为false
          */
          ascii_only: true,
          /*
           是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
          */
          comments: false
        },
        compress: {
          /*
           是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
           不大的警告
          */
          warnings: false,
          comparisons: false,
        },
      },
      test: /.js$/g,
      sourceMap: false
    }),

avatar
文章
阅读
粉丝