如何使用webpack优化开发/生产环境

最新推荐文章于 2024-05-23 09:06:50 发布
最新推荐文章于 2024-05-23 09:06:50 发布
阅读量255 收藏
点赞数 1
文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48349120/article/details/121681120
版权

webpack优化

HMR 热模块替换/模块热替换

作用：一个模块发生变化，只会更新这个模块（而不是打包所有）提高速度
样式文件：可以使用HRM功能，因为style-loader内部实现了
js文件：默认没有HRM
html文件：默认没有HRM，同时html文件不能热更新（本地代码不能重新编译）了<就一个文件，不需要做HMR功能>

  • 解决 ：修改entry入口，讲html文件引入
const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.export={
   entry:['./src/index.js','./src/index.html'],
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
        module：{
     rules：[
       //详细loader配置 
       { 
         //处理css资源
         test:/\.css$/,
         use:[
           'style-loader',//（是一个包）
           'css-loader',//（是一个包）
         ]
       },
       { 
         //处理less资源
         test:/\.less$/,
         use:[
           'style-loader',//（是一个包）
           'css-loader',//（是一个包）
           'less-loader'
         ]
       },
       {
         //处理图片资源
         test:/\.(jpg|png|gif)$/,
         loader:'url-loader'
         options:[
           limit:8*1024
           name:'[hash:10].[ext]',
           //关闭es6模块化
           esModule:false,
           outputPath:'imgs'//改变输出路径
         ]
       },
        {
         test:/\.html$/,
         //处理html文件的img图片
         loader:'html-loader'
         name:'[hash:10].[ext]'
       },
       {
       //打包其他资源
         exclude:/\.(css|js|html|less|jpg|png|gif)$/,
         loader:'file-loader',
         //修改名字
         options:{
         name:'[hash:10],[ext]'
       },
     ]
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'
     })
   ],
   //模式
   mode:'development'
     devServer:{
     //项目构建后的路径
      contentBase:resolve(_dirname,'build'),
      //启动gzip压缩
      compress:true,
      //端口号
      port:3000,
      //自动打开浏览器
      open:true，
      //开启HMR功能
      //当修改了webpack配置，一定要重启webpack服务
      hot:true
  }
}

js的热模块
在index.js文件中写

针对非入口文件的js
import print from './print';
if(module.hot){
  //一旦module.hot为true，说明开启了HMR功能 -->让HMR功能代码生效
  module.hot.accept('./print.js',function(){
  //方法监听print.js文件变化，一旦发生变化，其他模块不会重新打包构建，会执行后面的回调函数
  print();
}

开发环境下调试代码（source-map）

一种提供源代码到构建后代码到映射技术（如果构建后代码出错了，通过映射可以追踪到源代码的目录）
[inline-|hidden-|eval-][nosources-][cheap-[module]]source-map

  • source-map：外联
    提示错误代码的准确信息和源代码错误位置
  • inline-source-map:内联：只生成一个source-map
    提示错误代码的准确信息和源代码错误位置
  • hidden-source-map:外联
    提示错误代码错误原因但是没有错误位置，不能追踪到源代码错误
  • eval-source-map:内联：每个文件都生成对应source-map，在eval函数中
    提示错误代码的准确信息和源代码错误位置
  • mosources-source-map：外联
    提示错误代码的准确信息，没有源代码错误位置
  • cheap-source-map：外联
    提示错误代码的准确信息和源代码错误位置，只能精确到行
  • cheap-module-source-map:外联
    提示错误代码的准确信息和源代码错误位置

1.生产环境：速度快，调试友好 （内联会让代码体积大，所以排除）source-map
2.开发环境：源代码隐藏？调式友好？ eval-source-map

内联外联区别 1.外部生成了文件，内联没有2.内联构建速度更快

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.export={
   entry:['./src/index.js','./src/index.html'],
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
        module：{
     rules：[
       //详细loader配置 
       { 
         //处理css资源
         test:/\.css$/,
         use:[
           'style-loader',//（是一个包）
           'css-loader',//（是一个包）
         ]
       },
       { 
         //处理less资源
         test:/\.less$/,
         use:[
           'style-loader',//（是一个包）
           'css-loader',//（是一个包）
           'less-loader'
         ]
       },
       {
         //处理图片资源
         test:/\.(jpg|png|gif)$/,
         loader:'url-loader'
         options:[
           limit:8*1024
           name:'[hash:10].[ext]',
           //关闭es6模块化
           esModule:false,
           outputPath:'imgs'//改变输出路径
         ]
       },
        {
         test:/\.html$/,
         //处理html文件的img图片
         loader:'html-loader'
         name:'[hash:10].[ext]'
       },
       {
       //打包其他资源
         exclude:/\.(css|js|html|less|jpg|png|gif)$/,
         loader:'file-loader',
         //修改名字
         options:{
         name:'[hash:10],[ext]'
       },
     ]
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'
     })
   ],
   //模式
   mode:'development'
     devServer:{
     //项目构建后的路径
      contentBase:resolve(_dirname,'build'),
      //启动gzip压缩
      compress:true,
      //端口号
      port:3000,
      //自动打开浏览器
      open:true，
      //开启HMR功能
      //当修改了webpack配置，一定要重启webpack服务
      hot:true
  },
  //加东西
  devtool:'eval-source-map'
}

oneOf

提升构建速度

//当一个文件被多个loader处理，一定要指定loader的先后执行顺序js中（先执行eslint 再执行babel）
const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const 	MiniCssExtractPlugin=require('mini-css-extract-plugin');
const 	OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
//复用loader
const commonCssLoader=[
  MiniCssExtractPlugin.loader,
  'css-loader',
  {//兼容性，在package.json中定义browserslist
    loader:'postcss-loader',
    //修改配置
    potions:{
    ident:'postcss',
    plugins:()=>[
      //postcss插件
      require('postcss-preset-env')()
    ] 
    }
  }
];
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
     {
            test:/.js$/,
            exclude:/node_modules/,
            loader:'eslint-loader',
            //优先执行的意思
            enforce:'pre'
            options:{
              //自动修复eslint错误
            fix:true 
         },
     oneOf:[//以下loader只会匹配一个，不能两个配置处理同一种类型文件
       {
         test:/\.css$/,
         use:[commonCssLoader]
        },
        {
          test:/\.less$/,
          use:[...commonCssLoader, 'less-loader']
         },
         {//在package.json中eslintConfig  ---> airbnb
            test:/.js$/,
            exclude:/node_modules/,
            loader:'eslint-loader',
            options:{
              presets:[
                [
                  '@babel/preset-env',
                  {
                      useBuiltIns:'usage',
                     //指定corejs版本
                      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:10].[text]',
               outputath:'imgs',
               esModule:false
             }
           },//html里面的img
           {
             test:/\.html$/,
             loader:'html-loader'
           },
           {
              //打包其他资源
             exclude:/\.(css|js|html|less|jpg|png|gif)/,
             loader:'file-loader',
             options:{
               outputPath:'media',
               name:'[hash:10],[ext]'
             }
            },
           
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'，
       //压缩html代码，里面压缩配置
       minify:{
         //折叠空格
         collapseWhitespace:true,
         //移除注释
         removeComments:true
       }
     }),
     new MiniCssExtractPlugin({
       //若想输入到css目录下/重命名
       filename:'css/built.css'
     }),
     //压缩css：会运行更快
     new OptimizeCssAssetsWebpackPlugin(),
   ],
   //模式   生产环境下自动压缩js代码
   mode:'production'
}

缓存

  • babel：CacheDirectory:true–>让第二次打包构建速度更快
  • 文件资源 修改文件名 hash：每次webpack构建打包时生成唯一hash值
    问题：因为js和css使用同一hash值，如果重新打包会导致所有缓存失效
    chunkhash：根据chunk生成的hash值，如果打包来自于同一个trunk，hash值一样
    问题：js和css的hash值还是一样的，因为css是在js中被引入的，所以属于同一个trunk
    什么是trunk，所有根据入口文件引入的js、css，都会用一个trunk，是一个代码块
    contenthash：根据文件的内容生成的hash，不同文件hash值一定不一样–>让代码上线运行缓存速度更快
//当一个文件被多个loader处理，一定要指定loader的先后执行顺序js中（先执行eslint 再执行babel）
const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const 	MiniCssExtractPlugin=require('mini-css-extract-plugin');
const 	OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
//复用loader
const commonCssLoader=[
  MiniCssExtractPlugin.loader,
  'css-loader',
  {//兼容性，在package.json中定义browserslist
    loader:'postcss-loader',
    //修改配置
    potions:{
    ident:'postcss',
    plugins:()=>[
      //postcss插件
      require('postcss-preset-env')()
    ] 
    }
  }
];
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.[hash:10].js', //生成的资源带hash值
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
     {
            test:/.js$/,
            exclude:/node_modules/,
            loader:'eslint-loader',
            //优先执行的意思
            enforce:'pre'
            options:{
              //自动修复eslint错误
            fix:true 
         },
     oneOf:[//以下loader只会匹配一个，不能两个配置处理同一种类型文件
       {
         test:/\.css$/,
         use:[commonCssLoader]
        },
        {
          test:/\.less$/,
          use:[...commonCssLoader, 'less-loader']
         },
         {//在package.json中eslintConfig  ---> airbnb
            test:/.js$/,
            exclude:/node_modules/,
            loader:'eslint-loader',
            options:{
              presets:[
                [
                  '@babel/preset-env',
                  {
                      useBuiltIns:'usage',
                     //指定corejs版本
                      corejs:{
                        version:3            
                      },
                     //兼容性做到哪个版本浏览器
                      targets:{
                        chrome:'60',
                        firefox:'60',
                        ie:'9',
                        safari:'10',
                        edge:'17'
                     }
                  }
                  ]
                ],
                //开启babel缓存
                //第二次构建时，会读取之前的缓存
                CacheDirectory:true
              ]
            }
           },
           {
             test:/\.(jpg|png|gif)$/,
             loader:'url-loader',
             options:{
               limit:8*1024,
               name:'[hash:10].[text]',
               outputath:'imgs',
               esModule:false
             }
           },//html里面的img
           {
             test:/\.html$/,
             loader:'html-loader'
           },
           {
              //打包其他资源
             exclude:/\.(css|js|html|less|jpg|png|gif)/,
             loader:'file-loader',
             options:{
               outputPath:'media',
               name:'[hash:10],[ext]'
             }
            },
           
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'，
       //压缩html代码，里面压缩配置
       minify:{
         //折叠空格
         collapseWhitespace:true,
         //移除注释
         removeComments:true
       }
     }),
     new MiniCssExtractPlugin({
       //若想输入到css目录下/重命名
       filename:'css/built.css'
     }),
     //压缩css：会运行更快
     new OptimizeCssAssetsWebpackPlugin(),
   ],
   //模式   生产环境下自动压缩js代码
   mode:'production'
}

tree shaking

去除在应用程序中没有使用的代码
前提：1.必须使用es6模块化 2.开启production环境
作用：减少代码体积
在package.json中配置

"sideEffects":false;//所有代码都没有副作用（都可以进行 tree shaking）
//问题：可以能会把css/ @babel/polyfill（副作用）文件干掉
"sideEffects":["*.css","*.less"];//解决

code split

module.export={
//单入口
  // entry:'./src/index.js',
  entry:{
    //多入口：有一个入口，最终输出就有一个bundle
    main:'./src/index.js',
    test:'./src/test.js',
  }
   output:{
   //[name]取文件名
   filename:'built.[name].[hash:10].js', //生成的资源带hash值
   path:resolve(_dirname,'build')
   }，
   //plugin的配置
   plugins:[
   ],
   //可以将node_modules中代码单独打包成一个chunk最终输出
   //自动分析多入口文件中有没有公共的文件，如果有会打包成单独的一个trunk
   optimzation:{
     splitChunks:{
     chunks:'all'
     }
   }
   //模式   生产环境下自动压缩js代码
   mode:'production'
}

第3种方式：通过js代码，让某个文件被单独打包成一个trunk
在index.js页面
import动态导入语法：能将某个文件单独打包

import('./test')
  .then(()=>{
    //文件加载成功
  })
  .catch(()=>{
    //文件加载失败
  })

懒加载和预加载

js文件的懒加载（触发了某些条件的时候才会加载）

//懒加载 --放在函数中，函数调用的时候加载：需要加载的时候才加载
//预加载 prefetch：会提前加载js文件
//正常加载可以认为是并行加载（用一时间加载多个文件） 预加载：等其他资源加载完毕，浏览器空闲了，再偷偷下载
//'/*webpackChunkName:'test',webpackPrefetch:true*/'分割成两个文件
import('/*webpackChunkName:'test'*/'./test').then(()=>{
 console.log('过一段时间再加载成功')
}

PWA（渐进式网络开发应用程序）

离线也可以访问
workbox 下载包workbox-webpack-plugin

//当一个文件被多个loader处理，一定要指定loader的先后执行顺序js中（先执行eslint 再执行babel）
const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const 	MiniCssExtractPlugin=require('mini-css-extract-plugin');
const 	OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
const 	WorkboxWebpackPlugin=require('workbox-webpack-plugin');
//复用loader
const commonCssLoader=[
  MiniCssExtractPlugin.loader,
  'css-loader',
  {//兼容性，在package.json中定义browserslist
    loader:'postcss-loader',
    //修改配置
    potions:{
    ident:'postcss',
    plugins:()=>[
      //postcss插件
      require('postcss-preset-env')()
    ] 
    }
  }
];
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.[hash:10].js', //生成的资源带hash值
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
     {
            test:/.js$/,
            exclude:/node_modules/,
            loader:'eslint-loader',
            //优先执行的意思
            enforce:'pre'
            options:{
              //自动修复eslint错误
            fix:true 
         },
     oneOf:[//以下loader只会匹配一个，不能两个配置处理同一种类型文件
       {
         test:/\.css$/,
         use:[commonCssLoader]
        },
        {
          test:/\.less$/,
          use:[...commonCssLoader, 'less-loader']
         },
         {//在package.json中eslintConfig  ---> airbnb
            test:/.js$/,
            exclude:/node_modules/,
            loader:'babel-loader',
            options:{
              presets:[
                [
                  '@babel/preset-env',
                  {
                      useBuiltIns:'usage',
                     //指定corejs版本
                      corejs:{
                        version:3            
                      },
                     //兼容性做到哪个版本浏览器
                      targets:{
                        chrome:'60',
                        firefox:'60',
                        ie:'9',
                        safari:'10',
                        edge:'17'
                     }
                  }
                  ]
                ],
                //开启babel缓存
                //第二次构建时，会读取之前的缓存
                CacheDirectory:true
              ]
            }
           },
           {
             test:/\.(jpg|png|gif)$/,
             loader:'url-loader',
             options:{
               limit:8*1024,
               name:'[hash:10].[text]',
               outputath:'imgs',
               esModule:false
             }
           },//html里面的img
           {
             test:/\.html$/,
             loader:'html-loader'
           },
           {
              //打包其他资源
             exclude:/\.(css|js|html|less|jpg|png|gif)/,
             loader:'file-loader',
             options:{
               outputPath:'media',
               name:'[hash:10],[ext]'
             }
            },
           
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'，
       //压缩html代码，里面压缩配置
       minify:{
         //折叠空格
         collapseWhitespace:true,
         //移除注释
         removeComments:true
       }
     }),
     new MiniCssExtractPlugin({
       //若想输入到css目录下/重命名
       filename:'css/built.css'
     }),
     //压缩css：会运行更快
     new OptimizeCssAssetsWebpackPlugin(),
     new WorkboxWebpackPlugin.GenerateSW({
     //帮助serviceworker快速启动
     //删除旧的serviceworker
     //生成一个serviceworker配置文件
       clientsClaim:true,
       skipWaitting:true
     })
   ],
   //模式   生产环境下自动压缩js代码
   mode:'production'
}

注册serviceworker
在入口文件

//注意：1.eslint不认识window。navigator全局变量
解决：需要修复package.json中eslintConfig配置
2.sw代买必须运行在服务器上-->nodejs  -->npm i serve -g    serve -s build 
启动服务器，将build目录下的所有资源作为静态资源暴露出去

"env":{
  "browser":true//支持浏览器端全局变量
}//
//注册serviceworker
//处理兼容性问题
if('serviceworker' in navigator){
  window.addEventListener('load',()=>{
    navigator.serviceworker.register('/service-worker.js')
    .then(()=>{
      console.log('注册成功了')
     })
    .catch(()=>{
      console.log('注册失败了')
    })
}

多进程打包

下载thread-loader ,一般给babel-loader用

         {//在package.json中eslintConfig  ---> airbnb
            test:/.js$/,
            exclude:/node_modules/,
            use:[
            //开启多进程打包，进程开启有时间的，大概600ms，进程通信也有开销
            //只有在工作消耗时间比较长的时候，才需要多进程打包
              'thread-loader',
              //修改配置
              options:{
                workers:2//进程2个
              }
              {
                loader:'babel-loader',
            options:{
              presets:[
                [
                  '@babel/preset-env',
                  {
                      useBuiltIns:'usage',
                     //指定corejs版本
                      corejs:{
                        version:3            
                      },
                     //兼容性做到哪个版本浏览器
                      targets:{
                        chrome:'60',
                        firefox:'60',
                        ie:'9',
                        safari:'10',
                        edge:'17'
                     }
                  }
                  ]
                ],
                //开启babel缓存
                //第二次构建时，会读取之前的缓存
                CacheDirectory:true
              ]
            }
              }
            ],
            
           },

externals和dill（动态连接库）

不同的是：dill单独的对库进行打包，有的不打包，有的拆分开打包成多个

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const webpack=require('webpack');
const AddAssetHtmlWebpackPlugin=require('add-asset-html-webpack-plugin');
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.[hash:10].js', //生成的资源带hash值
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[]
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'，
     }),
     //告诉webpack那些库不参与打包，同时使用时名称也得改
      new webpack.DillPlugin({
      mainfes:resolve(_dirname,'dill/mainfest.json'),
      //将某个文件打包输出出去，并在html中引入该资源
      new AddAssetHtmlWebpackPlugin({
        filepath:resolve(_dirname,'dill/jquery.json'),
      })
   ],
   //模式   生产环境下自动压缩js代码
   mode:'production',
   externals:{//快
     //拒绝包打包进来 --npm包
     jquery:'jQuery'
   }
}
在index.js页面引入

dill打包，创建webpack.dill.js
使用dill技术，对某些库进行单独打包（jQuery、react、vue。。。）
运行–> webpack --config webpack.dill.js

const {resolve}=require('path');
const webpack=require('webpack');
module.export={
   entry:{//最终打包生成[name]-->jquery
     //['jquery']-->要打包的库是jQuery
     jquery:['jquery']
   },
   output:{
     filename:'[name].js', 
     path:resolve(_dirname,'dill'),
     libiary:'[name]_[hash]',//打包的库里面向外面暴露出去的内容的名字
   },
   plugins:[
     new webpack.DillPlugin({
       name:'name_[hash]',//映射库的暴露的内容名称
       path:resolve(_dirname,'dill/mainfest.json'),//输出文件路径
   ],
   mode:'production'
  }

总结

在这里插入图片描述

⊙o⊙abc
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack学习笔记之优化缓存、合并、懒加载
01-19
下面是生产环境配置文件webpack.production.js，与wenbpack.config.js相比其不需要一些dev-tools,dev-server和jshint校验等，将与开发相关的东西删掉。下面的介绍均以此代码配置作参考。 /*生成环境配置文件：不...
webpack生产环境性能优化配置
前端御书房
05-26 327
webpack生产环境性能优化，持续更新中……
webpack生产环境性能优化
s18882的博客
04-06 84
webpack 生产环境性能优化资源缓存使用contenthash多文件输出第三方库的打包小图片使用base64减少首屏加载的数据量 最近在工作中，发现公司原来的前端项目，加载速度并不理想，所以对其进行优化。 资源缓存 在我看来，前端的项目中存在大量的第三方组件，图片等资源。通过缓存的方法，可以减少我们通过网络请求的数据量，每次请求资源时，只需要确认资源是否更新即可。 使用contenthash 在webpack中，一般有三种hash值，他们分别是hash，chunkhash，contenthash。has
webpack生产环境优化-优化代码运行的性能
~
04-09 523
1.lazy loading懒加载：对js进行懒加载 现有两个js文件，index.js和test.js,当点击按钮的时候再加载test.js文件， 预加载：prefetch,会在使用之前提前加载js文件 页面初始化时network中可以看到加载了test.js文件，点击按钮的时候会读取缓存，重新加载js文件 那么疑问来了，既然预加载会直接加载js文件，为什么还要放在函数里呢，和被注释掉的代码有什么却别呢？ 预加载：会在浏览器加载完其他文件后，空闲的时候再偷偷加载文件，相对于懒加载的好
前端工具-webpack生产模式优化介绍
往事不回头,余生不将就
11-01 7002
拨云见日 在webpack4中新增了，很多生产模式优化的功能 ，这些功能都是开箱即用的，大大提高了开发效率 这些开箱即用的功能开发体验很友好，但是对于初学者容易造成混淆，在本篇文章将仔细介绍一下 DefinePlugin DefinePlugin这个插件集成在webpack内部直接通过webpack.DefinePlugin使用即可 DefinePlugin 这个插件为代码注入全局成员，在production模式下这个插件默认启用,并且往代码中注入 process.env.NODE_ENV一个常量.
记一次webpack -- 提高开发效率优化
weixin_39357177的博客
04-19 233
（一）优化resolve.alias配置 resolve.alias配置通过别名来将原导⼊路径映射成⼀个新的导⼊路径，减少查找过程 resolve: { alias: { // 引入vue的时候，直接指向vue打包好之后的文件 // 比如import Vue from 'vue/dist/vue.common.js'--> import Vue from 'vue' vue$: "vue/dist/vue.esm.js", // 减少查找过程 起
webpack4.16.2-Config:搭建一个基于webpack4.16.2版本项目的基础环境，这里支持开发环境和生产环境，开发环境没做优化处理，生产环境满足代码压缩，样式抽离及压缩，样式去重，样式支持.less,.scss预编译，处理了flex兼容，css自动添加前缀，透明度兼容处理
04-29
webpack4.16.2-配置
webpack-features:快速配置Webpack
05-08
预设适用于具有以下功能的大多数应用程序：ESNext语法，CSS和媒体文件加载，生产/开发环境，浏览器/node.js目标及其他（请参阅选项）。 预设对项目的结构做出以下假设： src/index.js应用程序的入口点 src/index....
react-webpack-template：具有webpack，babel和tailwindcss的React模板，已为您配置并针对生产进行了优化
02-05
git clone项目并开始为React开发使用完全优化的环境。开始吧为了发展git clone将存储git clone到本地计算机。 运行npm install安装所有依赖项。 运行npm start以启动本地开发服务器。 一切都适合使用webpack进行热...
webpack4 入门最简单的例子介绍
01-19
Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。 webpack和...
webpack性能优化之在开发阶段优化打包构建速度
longtengg1的博客
07-17 291
1、优化打包构建速度 开发时每做一次修改，很快就能编译完、构建好。这就是优化打包构建速度，提高开发体验和效率。 1、优化babel-loader babel编译es6到es5还是消耗比较多的。 开启缓存 加了一个?cacheDirectory参数 只要是es6代码没有改的，启用缓存，就不会再重新编译 明确范围 通过include或exclude来确定范围，一般include和exclude两个中只写一个就可以了。 { test: /\.js$/,
npm详解
this__valve的博客
05-20 933
npm
web前端面试题
weixin_43993776的博客
05-20 854
①同步和异步任务进入不同的场所，同步进入主线程，异步进入事件列表并注册函数②当指定的事情完成时，事件列表会将这个函数移入Event Queue③主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，放入主线程执行.④上述过程会不断重复，也就是我们所说的事件循环。
Webpack5 解决静态资源重复打包问题
最新发布
weixin_42390185的博客
05-23 130
Webpack5静态资源重复打包问题
前端memorandum
FisrtBqy的博客
05-21 410
前端记事本
webpack5零基础入门-16封装cssloader函数
weixin_45636198的博客
05-17 397
我们发现配的cssloader中有很多重复性代码，所以应该对其进行封装，减少冗余的代码 3.修改rules 4.重新打包效果依然一样
vue-router路由懒加载以及三种实现方式
qq_53895518的博客
05-17 426
延迟加载或按需加载路由所对应的组件，而不是在应用初始化时就一次性加载所有组件。路由懒加载做了什么事情？主要作用是将路由对应的组件打包成一个个的js代码块只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！即：只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！
webpack：从0到1实现一个plugin
qq_36413371的博客
05-17 205
下面演示的是，生成html文件并引入bundle文件。
webpack tree shaking示例： js css
qq_36413371的博客
05-17 168
需要借助purgecss-webpack-plugin来清楚未用到的css。生成环境下，会自动开启tree shaking，用来清除没有用到的js代码。不借助vue-cli怎么做到移除单文件里面未用的css类名？
webpack生产环境优化
09-14
对于优化 webpack 的生产环境，以下是一些建议： 1. 代码压缩：通过使用 UglifyJSPlugin、TerserWebpackPlugin 等压缩插件，将 JavaScript 代码进行压缩，减小文件体积，并且可以消除一些不必要的代码。 2. 代码...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值