webpack之基础打包优化的实现

2024-04-02 19:04:59 441人浏览泡泡鱼

摘要

目录前言优化loader压缩代码gzip压缩抽离公共依赖包最后前言 webpack至今已经发展了5个版本，如果你还不会WEBpack，那么赶紧学习起来吧。webpack是web前端开

前言

webpack至今已经发展了5个版本，如果你还不会WEBpack，那么赶紧学习起来吧。webpack是web前端开发人员必学的一个知识点。本篇文章带大家一起看看webpack基础的打包优化。话不多说，上酸菜~~~~

优化loader

在脚手架项目中,想必各位开发人员都会用到预处理的CSS。比如sass、stylus、less这些预处理语言。我们知道使用这些预处理css必须要在webpack中配置相应的loader。

当我们配置过多的loader时,各loader之间必定会转换出大量的代码,这些代码会导致项目在启动和打包时变得非常慢,这个时候就需要我们去进行loader的优化了。在loader的相关的配置中,我们可以排除掉第三方包中的文件,减少loader代码转换的范围。

module.exports = {
    module: {
        rules: [
            test: /\.css$/, 
            loader: ['style-loader', 'css-loader'],
            include: [resolve('src')],// 只在src文件夹下查找
            // 不去查找的文件夹路径，node_modules下的代码是编译过得，没必要再去处理一遍
            exclude: /node_modules/ 
        ]
    }
}

压缩代码

在webpack中,我们可以使用UglifyjsWebpackPlugin这个插件来压缩 js 和css的代码,从而减小项目打包的体积,提升打包速率。

注意：在开发环境我们不需要使用这个插件~

//安装插件
npm install uglifyjs-webpack-plugin --save-dev

//在 Vue.config.js中

const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 
 
const env = process.env.NODE_ENV; 
module.exports = { 
... 
configureWebpack: config => {
  if (env === "production") {
    config.optimization.minimizer.push(
        new UglifyJsPlugin({
          //测试匹配压缩的文件
          test: /.js(?.*)?$/i,
          //要被压缩的文件
          include: //includes/,
          //是否开启文件缓存
          cache: true,
          //是否开启多进程并行压缩
          paralleL: true,
          // 使用uglifyOptions移除掉生产环境中的console
          uglifyOptions: {
            warnings: false,
            compress: {drop_console: true, drop_debugger: true, pure_funcs: ['console.log']}
          }
        }))
  }}}

uglifyjs-webpack-plugin这个插件还有很多的配置项具体可以参考uglifyjs-webpack-plugin

注意开启parallel多进程压缩对项目打包速度的提升很有帮助

gzip压缩

除了压缩 js和css,我们还可以压缩webpack打包之后的文件。

开启gzip压缩后webpack生成的js文件的体积将缩小原来的30%以上。

要开启gzip压缩我们也需要用到一个插件compression-webpack-plugin 并且我们还需要保证服务端和客户端都支持gzip。

//安装插件
npm install compression-webpack-plugin --save-dev

//在 vue.config.js中

const CompressionWebpackPlugin = require('compression-webpack-plugin'); 
const productionGzipExtensions = /.(js|css|JSON|txt|html|icon|svg)(?.*)$/i
module.exports = { 
... 
configureWebpack: config => {
  if (env === "production") {
    config.plugins.push({
      new CompressionWebpackPlugin({
       filename: '[path].gz[query]',
       alGorithm: 'gzip',
       test: productionGzipExtensions,
       threshold: 10240,
       minRatio: 0.8
  })
    })
  }}}

compression-webpack-plugin 这个插件同样也有很多的配置项，具体参考compression-webpack-plugin

抽离公共依赖包

对于一些体积较大，不长更新的包,我们并不需要下载到项目中使用。我们可以选择使用cdn的方式去进行引入，当然最好还是将这些库放在自己的服务器下~ webpack允许我们在外部引入一些资源。

在webpack的配置中有这样一个配置项 externals:

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies) 。

从外部加载扩展的依赖而不是在项目中获取。显然，这肯定能减少项目大小,缩小打包体积。

抽离公共依赖包我们也需要安装一个插件html-webpack-plugin。使用这个插件主要是将外部引入的cdn放到index.html中加载。

如果你的webpack的版本大于4.0那么你无需安装，webpack4.0已经自带了该插件。本项目中的webpack的版本是4.2.15的因此无需安装

下面和我一起看看该如何进行配置:

// 在 vue.config.js中
const baseUrl = 'https://minturechan.oss-cn-shenzheng.aliyuncs.com/npm'
const cdn = {
  js: [`${baseUrl}vue@2.6.11/dist/vue.min.js`,
    `${baseUrl}vue-router@3.2.0/dist/vue-router.min.js`,
    `${baseUrl}vuex@3.4.0/dist/vuex.min.js`,
    `${baseUrl}view-design@4.0.0/dist/iview.min.js`,
    `${baseUrl}Jquery@3.4.1/dist/jquery.min.js`
  ],
  css: [`${baseUrl}view-design@4.0.0/dist/styles/iview.css`]
}
module.exports ={
chainWebpack: config => {
//config.plugin('html')这个表示获取 html-webpack-plugin这个插件~
config.plugin('html').tap(args => {
  if (env === "production") {
    args[0].cdn = cdn
  }
  return args
})
 }
}

在vue.config.js中配置完成后我们还需要在public文件夹下的index.html中引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-Scalable=no">
    <meta Http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="icon" href="<%= BASE_URL %>zyd.ico" rel="external nofollow" >
    <title>test</title>
    <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="external nofollow"  rel="preload" as="style" />
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
    <% } %>

    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js){
    %> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %>
  </head>
  <body>
    <div id="app">
    <!-- built files will be auto injected -->
    </div>
  </body>
</html>

在index.html中加上如下代码即可引入外部cdn资源~~

最后

webpack还有非常多可以优化的地方，本文只是简单的说明了一些webpack基础的打包优化配置。

到此这篇关于webpack之基础打包优化的实现的文章就介绍到这了,更多相关webpack 打包优化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: webpack之基础打包优化的实现

本文链接: https://www.lsjlt.com/news/138589.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

webpack之基础打包优化的实现

目录前言优化loader压缩代码gzip压缩抽离公共依赖包最后前言 webpack至今已经发展了5个版本，如果你还不会webpack，那么赶紧学习起来吧。webpack是web前端开...

99+

2024-04-02
webpack前端应用之基础打包实现

目录前言：初识 Webpack 5一、前端工程化1、webpack2、webpack的使用：配置文件所需要的信息（五大配置属性）3、示例4、webpack中使用的loader二、we...

99+

2023-02-03

webpack 基础打包 webpack 打包
基于vue-cli的webpack打包优化案例

这篇文章主要介绍基于vue-cli的webpack打包优化案例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1、准备工作：测速与分析bundle既然我们要优化webpack打包，肯定...

99+

2024-04-02
webpack构建打包的性能优化实战指南

目录前言一、优化打包构建速度，提升开发体验和效率1.1优化babel-loader1.2IgnorePlugin，避免引入无用模块1.3noParse避免重复模块化解析1.4happ...

99+

2024-04-02
Vite打包优化之缩小打包体积实现详解

目录正文分析文件依赖指定文件按需加载路径别名&文件尾缀静态资源的打包最小化拆分包关闭一些打包配置项低版本浏览器兼容使用CDN开启Gzip如何测试网页性能？最后正文说到前端性...

99+

2023-01-04

Vite缩小打包体积 Vite打包优化
mini webpack打包基础解决包缓存和环依赖

目录正文index.js 主入口文件读主入口文件对依赖文件进行读取操作解决依赖成环问题正文本文带你实现 webpack 最基础的打包功能，同时解决包缓存和环依赖的问题 ~ 发车，先...

99+

2024-04-02
webpack打包速度优化的示例分析

这篇文章主要介绍了webpack打包速度优化的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。dll原有项目是线上和本地公用一套dll...

99+

2024-04-02
Vue中webpack常规打包优化的示例分析

这篇文章主要介绍了Vue中webpack常规打包优化的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。分析打包文件要优化，先分析。我们...

99+

2024-04-02
webpack自动打包功能实现

目录一、了解webpack二、在项目中安装和配置webpack三、webpack的打包四、webpack的自动打包一、了解webpack 当前web开发面临的困境1.文件依赖关系错综...

99+

2023-02-09

webpack自动打包 webpack打包
使用webpack打包ts代码的实现

目录使用 webpack 打包生成 package.json安装 cnpm安装 webpack 相关编写 webpack 配置文件创建 tsconfig.json修改 package...

99+

2024-04-02
webpack如何实现打包进度展示以及美化

这篇文章给大家分享的是有关webpack如何实现打包进度展示以及美化的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。准备我们既然要美化进度条就要考虑给他更改颜色。目前市面上给终端字符串上色最好用的还是chalk，支...

99+

2023-06-28
vue中webpack打包优化操作技巧有哪些

这篇文章主要介绍vue中webpack打包优化操作技巧有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！webpack是react项目标配的打包工具，和NPM搭配起来使用管理模块实...

99+

2024-04-02
Vite图片资源打包优化的实现

目录步骤1: 安装依赖步骤2: 配置Vite步骤3: 加载图片步骤4: 查看优化结果总结Vite是一种现代化的前端构建工具，它的打包速度非常快。在使用Vite进行开发的过程中，图片资...

99+

2023-05-15

Vite图片资源打包优化 Vite图片打包优化 Vite打包优化
Webpack自动清理打包目录的实现

目录1. 通过 npm scripts 清理理构建目录；2. 使用 clean-webpack-plugin 插件清理；Webpack在打包的时候，会在指定输出文件夹下面生...

99+

2023-01-09

Webpack自动清理打包目录 Webpack自动清理
webpack如何实现拆分、打包、压缩

这篇文章主要介绍webpack如何实现拆分、打包、压缩，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！步骤1.传统项目中的问题在不依赖任何自动化、模块化工具的项目中，通常我们的代码是这...

99+

2024-04-02
Webpack实现多页面打包的方法步骤

目录1. 多页面应用(MPA)概念2. 多页面打包基本思路3. 多页面打包通用方案4. 多页面打包实现1. 多页面应用(MPA)概念单页面在开发时会把所有的业务放在一个大的入口里面...

99+

2023-01-09

Webpack 多页面打包 webpack打包多页面
Vite性能优化之分包策略的实现

目录为什么需要分包策略？浏览器的缓存策略浏览器缓存策略的不足分包策略的实现为什么需要分包策略？还是举个例子，来回忆一下吧，什么呢？比如说，我使用了 loadsh.js 的东西，那么...

99+

2023-05-19

Vite 分包策略 Vite 分包
ES6基础语法之模块化怎么实现

本篇内容介绍了“ES6基础语法之模块化怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ES6 引入了模块化， ES6 的模块化分为导出...

99+

2023-06-30
vue项目打包以及优化的实现步骤

目录vue项目的打包上线及优化vue项目的打包项目托管项目的常见优化vue项目的打包上线及优化项目完成，我们会将项目进行上线，为了提升性能，我们往往会进行一些优化处理 vue项...

99+

2024-04-02
JS逆向之 webpack 打包站点实战原理分享

目录webpack 原理说明扣 JS 代码webpack 原理说明 webpack 是前端程序员用来进行打包 JS 的技术，打包之后的代码特征非常明显，例如下述代码。 (window...

99+

2024-04-02