webpack4 资源缓存

浅浅的花香味﹌ 2021-07-24 23:03 476阅读 0赞

1、babel缓存
    	在babel-loader中
    		方式一:在options内添加属性
    			cacheDirectory:true
    		方式二:use:['babel-loader?cacheDirectory=true']
    
    2、文件资源缓存
    	在打包输出文件的文件名中添加hash值
    	
    	hash值缓存,根据每次打包后webpack生成的hash值不同来加载资源
    		会因为使用的都是webpack每次打包后的hash值,导致改动一处,其他资源都改动,都重新加载了
    	
    	chunkhash值缓存,打包来源同一个chunk,生成的hash值就一样
    		如果css在js中引入,则因为属于同一个chunk(即是否属于同一个entry),导致改动一处,其他资源都改动,都重新加载了
    	
    	contenthash,根据文件内容生成hash值,并且不同文件hash值不一样
    		必须使用了插件:extract-text-webpack-plugin/mini-css-extract-plugin
    		
    		例如:
    			js输出文件:
    			    output: {
    				  filename: 'src/js/build.[contenthash:10].js',
    				  path:path.resolve(__dirname,'build')
    				},
    			  
    		    css输出文件:
    		    	new MiniCssExtractPlugin({
    			      filename: 'src/css/build.[contenthash:10].css'
    			    }),
    			    
    3、若进行了代码分割文件提取
    		   	optimization: {
    			    splitChunks: { 
    			      chunks:'all'  将node_modules内库单独打包
    			    },
    			  	runtimeChunk:{ 将文件中引入的其他文件的hash值提取成一个文件格式如下,避免进行缓存时,因为文件的内改变使得hash值改变,导致引入该文件的文件内容也发生变化,进而导致重新打包
    			      name: entrypoint => `runtime~${entrypoint.name}`
    			    }
    			  },
    			  
    4、TerserPlugin开启代码压缩缓存
        minimize:true,
        minimizer:[ 
        	new TerserPlugin({  需要下载'terser-webpack-plugin'并引入,假设命名为TerserPlugin
        		cache: true, 开启缓存
        		
        	})
        ]
     
    5、开启模块的缓存
    	(1)下载
    		cnpm install -D hard-source-webpack-plugin 
        (2)配置
        	const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
        	plugins:[
        		new HardSourceWebpackPlugin()
        	]

代码示例:

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin= require('mini-css-extract-plugin');
    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    const {  CleanWebpackPlugin } = require('clean-webpack-plugin');
    
    // process.env.NODE_ENV='development'
    
    module.exports = { 
      entry: ['./src/js/index.js','./src/index.html'],
      output: { 
        filename: 'src/js/build.[contenthash:10].js',
        path:path.resolve(__dirname,'build')
      },
      module: { 
        rules: [//创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
          { 
            test: /\.css$/, //匹配文件名
            use: [//使用哪些loader
              // 'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
              MiniCssExtractPlugin.loader, //取代style-loader,提取js中的css为单独文件
              'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
              { 
                loader: 'postcss-loader',
                ident: 'postcss',
                options: { 
                  postcssOptions: { 
                    plugins: [['postcss-preset-env',{ }]]
                  },
                }
              }
            ] 
          },
          { 
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader', 
              'less-loader', //将less文件编译成css文件
            ]
          },
          { 
            test: /\.(jpg|png|gif|jfif)$/,
            loader:'url-loader', //依赖于file-loader
            options: { 
              //图片小于8kb,会处理成base64,即减少请求数量,增大图片体积(请求速度会变慢cn)
              limit: 8 * 1024,
              esModule: false,  //不采用es6模式解析,否则会和html-loader采用的commonjs模式冲突
              name: '[name].[ext]',
              outputPath:'src/images'
            }
          },
          { 
            test: /\.html$/,
            loader:'html-loader', //处理html文档中的img,负责引入图片,交给url-loader处理
          },
          { 
            // exclude:/\.xx$/
            test: /\.(ttf|eot|svg|woff|woff2)$/,
            loader: 'file-loader',
            options: { 
              name: '[name].[ext]',
              outputPath:'src/icon'
            },
            
          },
          { //不检查node_modules
            test: /\.js$/,
            exclude:/node_modules/,
            loader: 'eslint-loader',
            enforce:'pre', //优先执行
            options: { 
              fix:true
            }
          },
          { //js兼容性处理
            test: /\.js$/,
            exclude:/(node_modules|bower_components)/,
            loader: 'babel-loader',
            options: { 
              // 预设,指示babel做兼容性处理
              presets: [['@babel/preset-env', { 
                targets: { 
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge:'19'
                },
                useBuiltIns: 'usage', //按需加入
                corejs: {  //指定core-js版本
                  version:3
                }
              }]],
              cacheDirectory:true //开启缓存
              // plugins: ['@babel/transform-runtime']
            }
          }
        ]
      },
      //插件
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html', //将模板复制成指定文件
          minify: { 
            collapseWhitespace: true, //折叠空格
            removeComments:true  //移出注释
          }
          
        }), //默认传键html文件,并引入打包输出的资源,默认为基本结构
        new MiniCssExtractPlugin({ 
          filename: 'src/css/build.[contenthash:10].css'
        }),
        new OptimizeCssAssetsPlugin(),
        new CleanWebpackPlugin(),
      ],
      mode: 'production',
      //自动化,自动编译、打开浏览器和自动刷新等
      devServer: { 
        // contentBase:['xx','xx',...]
        contentBase: path.resolve(__dirname, 'build'), //提供内容的目录
        //启动gzip压缩
        compress: true,
        port: 3000, //监听端口号
        open: true, //自动打开浏览器
        hot:true,
      },
      devtool:'source-map'
    }
    
    /** */

发表评论取消回复

表情：

评论列表（有 0 条评论，476人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 打包图片资源

webpack 打包图片资源 / loader: 1. 下载 2. 使用（配置） plugins：1. 下载 2. 引入 3.使用

野性酷女/ 2023年01月09日 03:54/ 0 赞/ 190 阅读

相关 webpack 打包样式资源

webpack 打包样式资源 `webpack.config.js`配置文件内容为： // 用来拼接绝对路径的方法 const { re

￡神魔★判官ぃ/ 2023年01月09日 01:10/ 0 赞/ 180 阅读

相关 webpack静态资源地址注入html,Webpack4+ 多入口程序构建

欢迎关注富途web开发团队，缺人从众其实，说实话这篇文章的由来也是有很多的原因在里面的。在这之前，我也做过不少的项目。有新的项目，也有旧的项目。通过对旧项目的不断研究，改进

一时失言乱红尘/ 2022年10月06日 05:55/ 0 赞/ 261 阅读

相关【Webpack 性能优化系列(4) - 缓存】详解如何做bable缓存和文件资源缓存

webpack系列文章： [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -] [【Webpa

深碍√TFBOYSˉ_/ 2022年09月09日 10:58/ 0 赞/ 104 阅读

相关复习webpack4之webpack与浏览器缓存

> 之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。这次学习webpack4不仅仅

女爷i/ 2022年01月19日 03:15/ 0 赞/ 226 阅读

相关 webpack4 资源缓存

1、babel缓存在babel-loader中方式一:在options内添加属性 cacheDirectory:true

浅浅的花香味﹌/ 2021年07月24日 23:03/ 0 赞/ 477 阅读

相关 webpack4 打包字体图标等其他资源

iconfont举例 1、下载图标代码到本地 (1)查看iconfont.css中需要的字体图标后缀名 (2)打开下载代码

刺骨的言语ヽ痛彻心扉/ 2021年07月24日 20:15/ 0 赞/ 481 阅读

相关 webpack4 资源文件内联

减少请求和避免闪动 js和html内联:一般用于移动端引入在html中进行内联: (1)下载 cnpm inst

雨点打透心脏的1/2处/ 2021年07月24日 17:02/ 0 赞/ 470 阅读

相关 webpack4 打包html资源

1、下载插件 cnpm i -D html-webpack-plugin 2、引入插件 const X = require('ht

绝地灬酷狼/ 2021年07月24日 13:43/ 0 赞/ 528 阅读

相关 webpack4 通过cdn引入外部资源打包

方式一: 1、与mode同级配置,则不会打包jquery externals: { jquery:'jQuery',

左手的ㄟ右手/ 2021年07月24日 12:19/ 0 赞/ 685 阅读