webpack之基础打包优化的实现

2024-08-21 05:57:53

前言

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中
/** 引入uglifyjs-webpack-plugin */
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中
/** 引入compression-webpack-plugin */
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 打包优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

浅谈 Webpack 如何处理图片(开发、打包、优化)

从 webpack book 的 Loading Assets 一章中延申出来. 改善前端项目体验中,很重要的点就是静态资源的优化.它是由于浏览器客户端在同一时间针对同一域名的请求有一定资源限制.如果资源过多.过大就会使得页面卡顿. 静态资源中,又以图片最为典型.那么我们在开发中该如何处理图片呢? webpack 是前端较为常用的手脚架工具,本文以它为例. 主要分为开发 . 打包 . 优化三个方面来介绍示例地址: webpack demo 开发 webpack 可以用使用url-loa
Vue项目总结之webpack常规打包优化方案

由于新建项目发版打包时间大概需要 30分钟 ,发版时严重拖慢下班时间,所以特意查看了相关文档来优化打包速度,争取早点下班,^_^. 分析打包文件要优化,先分析.我们先要知道到底是哪里拖慢我们的打包速度呢? 打包后生成文件分析可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件安装 npm i webpack-bundle-analyzer -D 使用修改 webpack.prod.conf.js 文件 const BundleAnalyzerP
webpack4.0打包优化策略整理小结

本文介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资料当前依赖包的版本 1.优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件从而缩小了loader加载搜索范围高概率命中文件 module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, // 排除不处理的目录
webpack dll打包重复问题优化的解决

关于webpack dll的使用,我这里不做过多介绍,网上都有,一撸一大把,今天我要说的是在使用dll plugin过程中出现的一个包依赖问题,这个问题导致打出来的包会包含重复的代码. 优化背景最近在给公司项目优化的时候,由于内部CDN上传文件大小限制了500K ,所以用了webpack dll来进行拆分打包,我将拆分的包分为三部分: vue生态包( vue . vuex . vue-router . vuex-class . vue-class-component 等周边生态的库) vue
浅谈Webpack打包优化技巧

前端的打包工具从之前的browserify.grunt.gulp到现如今的rollup.webpack,涌现出了很多优秀的打包工具,而目前最火的无疑是webpack,无论是当前热门的框架还是工具库很多都选择了它作为打包工具,因此在开发中webpack作为打包工具是一个很好的选择.在最近的项目开发中我也用到了webpack,其中也碰到了不少优化方面的问题,这里总结一下webpack打包优化的一些细节和方法. 首先,这次项目用到的是vue的全家桶,在webpack的配置方面直接用的是 vue-cli
vue webpack打包优化操作技巧

临近春节,公司很多同事都提前回家过年,剩余人员根据禅道去修改bug,当bug修正完毕以后,我们需要重新打包给运维,上测试服给测试同事提测,但是由于项目本体比较庞大,所以打包时间太过漫长(二十五分钟以上:sob:),所以有了打包优化的想法(其实想法早就有了,但是因为平时工作计划比较充实,所以一直没有去完成这个工作),这次正好有时间,所以去重新考虑了这个问题! webpack是react项目标配的打包工具,和NPM搭配起来使用管理模块实在非常方便. webapck 把所有的静态资源都看做是一个
浅谈React + Webpack 构建打包优化

本文介绍了React + Webpack 构建打包优化,分享给大家,具体如下: 使用 babel-react-optimize对 React 代码进行优化检查没有使用的库,去除 import 引用按需打包所用的类库,比如 lodash . echart 等 lodash 可以采用babel-plugin-lodash进行优化. 需要注意的是在 babel-react-optimize 中使用了 babel-plugin-transform-react-remove-prop-types 这
webpack打包优化的几个方法总结

为什么要优化打包? 项目越做越大,依赖包越来越多,打包文件太大单页面应用首页白屏时间长,用户体验差我们的目的减小打包后的文件大小首页按需引入文件优化 webpack 打包时间优化方式 1. 按需加载 1.1 路由组件按需加载 const router = [ { path: '/index', component: resolve => require.ensure([], () => resolve(require('@/components/index'))) }, { pat
vue打包通过image-webpack-loader插件对图片压缩优化操作

vue正常打包之后一些图片文件很大,使打包体积很大,通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积 step1: npm install image-webpack-loader --save-dev step2: 在build/webpack.base.conf.js中改如下配置 module.exports = { module: { { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // loader: 'url-loa
webpack之基础打包优化的实现

目录前言优化loader 压缩代码 gzip压缩抽离公共依赖包最后前言 webpack至今已经发展了5个版本,如果你还不会webpack,那么赶紧学习起来吧.webpack是web前端开发人员必学的一个知识点.本篇文章带大家一起看看webpack基础的打包优化.话不多说,上酸菜~~~~ 优化loader 在脚手架项目中,想必各位开发人员都会用到预处理的css.比如sass.stylus.less这些预处理语言.我们知道使用这些预处理css必须要在webpack中配置相应的loader.
深入理解基于vue-cli的webpack打包优化实践及探索

转眼已经是2019年,短短三四年时间,webpack打包工具成为了前端开发中必备工具,曾经一度的面试题都是问,请问前端页面优化的方式有哪些?大家也是能够信手拈来的说出缓存.压缩文件.CSS雪碧图以及部署CDN等等各种方法,但是今天不一样了,可能你去面试问的就是,请问你是否知道webpack的打包原理,webpack的打包优化方法有哪些?所以该说不说的,笔者闲着没事研究了一下webpack的打包优化,可能大家都有看过类似的优化文章~ 但是笔者还是希望能够给大家一些新的启发~ 1.准备工作:测速与分
浅谈react+es6+webpack的基础配置

这是模块化开发.主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作安装 nodeJs 首先进入node官网,去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令 webpack 也有一个 web 服务器 npm install webpac
Vue+webpack项目基础配置教程

最近在学习webpack,跟着课程一个单页面应用,在这里记录一下.这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置. 记录比较粗略,后续会更新. 1.开发环境:vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程使用的IDE是 VScode 2.项目初始化快捷键ctrl+` 打开vscode控制台 vscode界面 2.1安装webpack vue vue-loader npm init npm i webp
详解Vue打包优化之code spliting

在http1的时代,比较常见的一种性能优化就是合并http的请求数量,通常我们会把许多js代码合并在一起,但是如果一个js包体积特别大的话对于性能提升来说就有点矫枉过正了.而如果我们对所有的代码进行合理的拆分,将首屏和非首屏的代码进行剥离,将业务代码和基础库代码进行拆分,在需要某段代码的时候再加载它,下次若再需要用则从缓存中读取,一来可以更好地使用浏览器缓存,再者就是可以提高首屏加载速度,很好提升用户的体验. 核心思想业务代码和基础库的分离这个其实很好理解,业务代码通常更新迭代很频繁,而基础
关于vue-cli 3配置打包优化要点（推荐）

配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数 /** * 返回异步组件 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用 */ const AsyncComponentHook = (path: String): Function => (): any => { // 通过 webpack 的内联注释,设置模块名 let component = import(/* webpackChunkName: "view-[request]" *

webpack之基础打包优化的实现

目录

前言

优化loader

压缩代码

gzip压缩

抽离公共依赖包

最后

相关推荐

随机推荐