使用webpack打包的项目优化方案

最新推荐文章于 2024-08-09 07:30:53 发布
置顶 最新推荐文章于 2024-08-09 07:30:53 发布
阅读量896 收藏
点赞数
分类专栏： webpack 文章标签： webpack js 前端 优化 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jackTesla/article/details/88311130
版权

 一、根据可视化工具查看项目打包

webpack-bundle-analyzer可视化工具

Webpack进行打包，到底打了多少包，每个包有多大？webpack-bundle-analyzer这款插件可以帮助我们清晰展示。针对多余的包文件过大，剔除首次影响加载的效率问题进行剔除修改。

图片

 

模块功能：

* 意识到你的文件打包压缩后中真正的内容

* 找出哪些模块组成最大的大小

* 找到错误的模块

* 优化它！

* 最好的事情是它支持缩小捆绑！它解析它们以获得实际大小的捆绑模块。它也显示他们的gzipped大小！

 

安装和使用:

npm install --save-dev webpack-bundle-analyzer
//在webpack.config.js中：
let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
}

 

默认的可选配置对象：

new BundleAnalyzerPlugin({
    // 可以是`server`，`static`或`disabled`。
    // 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
    // 在“静态”模式下，会生成带有报告的单个HTML文件。
    // 在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
    analyzerMode: 'server',
    // 将在“服务器”模式下使用的主机启动HTTP服务器。
    analyzerHost: '127.0.0.1',
    // 将在“服务器”模式下使用的端口启动HTTP服务器。
    analyzerPort: 8888,
    // 路径捆绑，将在`static`模式下生成的报告文件。
    // 相对于捆绑输出目录。
    reportFilename: 'report.html',
    // 模块大小默认显示在报告中。
    // 应该是`stat`，`parsed`或者`gzip`中的一个。
    // 有关更多信息，请参见“定义”一节。
    defaultSizes: 'parsed',
    // 在默认浏览器中自动打开报告
    openAnalyzer: true,
    // 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
    generateStatsFile: false,
    // 如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
    // 相对于捆绑输出目录。
    statsFilename: 'stats.json',
    // stats.toJson（）方法的选项。
    // 例如，您可以使用`source：false`选项排除统计文件中模块的来源。
    // 在这里查看更多选项：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
    statsOptions: null,
    logLevel: 'info' 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
})

启动服务:

生产环境查看：npm run build --report 或 正常build 即可启动查看器

开发环境查看：webpack -p --progress 或启动正常devServer服务即可启动查看器!

 

官方请看：[webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)


 

Speed-Measure-Plugin可视化工具

通过这个插件，我们可以清楚的看到，打包整体的时间，各plugin，loader处理时间，以有利于我们针对打包速度取做优化。

图片

 

安装和使用:

npm install --save-dev speed-measure-webpack-plugin
//webpack配置

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = smp.wrap({
    plugins: [
        new MyPlugin(),
        new MyOtherPlugin()
    ]
});

 

官方请看：[Speed Measure Plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin)

 

analyse

先使用 Webpack 打包指令生成 Webpack stats 分析文件

webpack --profile --json > stats.json

 

然后到官方提供的网页上传stats.json

[Webpack analyse](http://webpack.github.io/analyse/)

 

就可以通过一些可视化资料来分析打包结果

图片

 

官方请看：[webpack](http://webpack.github.io/)

 

二、webpack外部扩展

列出了项目中较大的包，剩下的事情就是想办法如何减小这些包的体积（将一个大包拆成多个小包）。

项目中产生较大的包的原因可以从两个方面去考虑：

        1. 项目中引入的依赖包过于庞大；

        2. 业务代码集中在一块写，或者是业务代码写的比较繁琐；

 

对于这两个问题，我们可以从两个方面着手解决：

        1. 抽离项目中公共依赖的、不常变动的、体积较大的包；

        2. 将一个较大的业务代码文件，拆成多个较小的文件，异步加载（或者优化业务代码）。

 

我们来讨论第一种方法，在不改动业务代码的情况下，如何减小公共依赖。

 

要知道这些依赖是我们需要的，不可能排除不引入。

但是他们都是全局依赖的，万年不变的，可以使用浏览器自己的缓存来实现不重复加载。

具体做法就是：

将项目中需要的一些公共依赖包，并且不常变动的，单独取出，不再每次都打包编译（如React，Redux等）。

而是通过使用script标签形式cdn引入，这样在有缓存的情况下，这些资源均走缓存，不必加载。

 

具体做法：

总结需要抽离的公共依赖

这些依赖需要满足一定的条件：

     * 体积较大；

     * 不常更新；

     * 依赖较多；

     * 是前置依赖；

 

常见的满足这类条件的包有：

     * react

     * react-dom

     * redux

     * react-redux

     * moment

     * jquery

 

另外一些包文件如 Antd库文件，整个包较大，但是每次用什么取什么的话，库文件也会按需加载，不必单独取出。

还有这类库文件不建议单独取出，因为里面可能会有bug，需要更新。

 

使用CDN引入资源

将抽离出来文件放到cnd上，注意，这些文件要是压缩版本，并且是用ES5编写的，否则浏览器报错。

<head>
    <title>React Starter Kit</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 体积较大的包 -->
    <script src="https://cdn.bootcss.com/react/15.0.0/react-with-addons.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/react-router/3.0.0/ReactRouter.min.js"></script>
    <script src="https://cdn.bootcss.com/redux/3.6.0/redux.min.js"></script>
    <script src="https://cdn.bootcss.com/react-redux/5.0.1/react-redux.min.js"></script>
    <script src="https://cdn.bootcss.com/history/4.5.0/history.min.js"></script>
</head>

 

配置webpack.conf.js

资源已经引入，接下来需要配置webpack，使其打包的时候不在将这些资源打包。

const webpackConfig = {
    name: 'client',
    target: 'web',
    devtool: config.compiler_devtool,
    resolve: {
        root: paths.client(),
        extensions: ['', '.js', '.jsx', '.json'],
    },
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
        'react-router': 'ReactRouter',
        'redux': 'Redux',
        'history': 'History'
    },
    module: {},
}

这里externals告诉webpack那些资源从哪里寻找。

该对象的键表示 require 或者 import 时候的字符串

值表示的当前环境下的变量，比如引入React之后，React被作为全局对象，webpack就回去寻找React对象。

如果其中有一个找不到，打包就会失败。

 

配置vendor.js

接下来配置vendor，使vendor也不打包该些JS

compiler_vendors : [
    // 'react',
    // 'react-redux',
    // 'react-router',
    // 'redux',
],

 

三、DLL方式

dll 全称是：dynamic link library（动态链接库）

dll方式也就是通过配置，告诉webpack指定库在项目中的位置，从而直接引入，不将其打包在内。

上面介绍的方式是将包放到cdn上，build的时候不在引入对应的包；

dll方式就是指定包在项目中，build的时候不在打包对应的包，使用的时候引入。

webpack通过webpack.DllPlugin与webpack.DllReferencePlugin两个内嵌插件实现此功能。

 

新建webpack.dll.config.js

const webpack = require('webpack');


module.exports = {
    entry: {
        bundle: [
            'react',
            'react-dom',
            //其他库
        ],
    },
    output: {
        path: './build',
        filename: '[name].js',
        library: '[name]_library'
    },
    plugins: [
        new webpack.DllPlugin({
            path: './build/bundle.manifest.json',
            name: '[name]_library',
        })
    ]
};

 

webpack.DllPlugin选项：

        * path：manifest.json文件的输出路径，这个文件会用于后续的业务代码打包；

        * name：dll暴露的对象名，要跟output.library保持一致;

        * context：解析包路径的上下文，这个要跟接下来配置的 webpack.config.js 一致。

 

运行：

webpack --config webpack.dll.config.js

生成两个文件，一个是打包好的bundlejs，另外一个是bundle.mainifest.json，大致内容如下：

{
    "name": "bundle_library",
    "content": {
    "./node_modules/react/react.js": 1,
    "./node_modules/react/lib/React.js": 2,
    "./node_modules/process/browser.js": 3,
    "./node_modules/object-assign/index.js": 4,
    "./node_modules/react/lib/ReactChildren.js": 5,
    "./node_modules/react/lib/PooledClass.js": 6,
    "./node_modules/react/lib/reactProdInvariant.js": 7,
    //其他引用
}

 

配置webpack.config.js

const webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        main: './main.js',
    },
    output: {
        path: path.join(__dirname, "build"),
        publicPath: './',
        filename: '[name].js'
    },
    module: {
        loaders:[
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
            {
                test: /\.jsx?$/,
                loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
                include: path.join(__dirname, '.')
            }
        ]
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: '.',
            manifest: require("./build/bundle.manifest.json"),
        }),
    ]
};

 

webpack.DllReferencePlugin的选项中：

       * context：需要跟之前保持一致，这个用来指导webpack匹配

       * manifest.json中库的路径；

       * manifest：用来引入刚才输出的manifest.json文件。

 

更多文章jacktesla的博客

jackTesla
关注
专栏目录
webpack的打包优化
hzh2031015的博客
06-04 194
webpack配置打包优化 （vue.config.js）一系列配置。 1，新建vue.config.js,设置静态资源路径为’./’,否则打包后项目无法运行 module.exports = { publicPath: "./" } 2，关闭生产环境下的SourceMap映射文件,包的大小减少80%； module.exports = { productionSourceMap: false, } 3，跨域配置 module.exports = { d...
webpack打包优化
风华绝代的博客
01-10 767
因为项目一直在加工能，每次打包之后都很慢，所以就要解决这个问题，我采用的方法如下, 一、使用DllPlugin 和DllReferencePlugin        这两个插件我们不用安装，是webpack支持的，我们可以直接来使用，主要思想就是我们将依赖单独抽离出来，单独打包，然后将打包后的js文件引入到html中，利用manifest.json（生成）来映射。接下来说步骤 （1）建一个c...
性能分析webpack-bundle-analyzer及其优化打包
qq_38143787的博客
08-13 8534
文章目录一、webpack-bundle-analyzer二、进行优化 一、webpack-bundle-analyzer 通过使用webpack-bundle-analyzer可以看到项目各模块的大小，可以按需优化。 1.安装 npm install --save-dev webpack-bundle-analyzer 2.在webpack.config.js中配置： const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').Bund
Speed Measure Webpack Plugin 使用教程
最新发布
gitblog_00893的博客
08-09 702
Speed Measure Webpack Plugin 使用教程 speed-measure-webpack-plugin⏱ See how fast (or not) your plugins and loaders are, so you can optimise your builds项目地址:https://gitcode.com/gh_mirrors/sp/speed-measure...
webpack使用笔记（六）优化项目
qq_42062727的博客
08-01 389
webpack-merge 使用 webpack-merge 插件可以让不同环境的 webpack 配置分别写在不同的文件里。在配置 webpack 时可以将开发环境和生产环节相同的配置项提取出来，写在一个单独的文件中，这样做可以更好的管理项目配置。 // 提取出 webpack-base文件 module.exports = { // .... } // webpack-config-dev.js 文件 const { merge } = require('webpack-merge'); co
webpack 使用优化（一）
weixin_33769125的博客
08-24 163
之前写了一篇关于webpack 如何使用的文章：webpack 单页面应用实战，并且写了一个 单页面应用的小项目 放到了github上。正巧公司前段时间用webpack 做了一个项目，项目不大，是基于单页面应用的。但是上线后才发现了一些问题，原来还是有一些要优化改进的地方。 webpack 单页面应用实战这篇文章基本已经满足了我们的需求。...
vue及webpack在项目中的一些优化
weixin_30872499的博客
04-04 74
传送：https://www.haorooms.com/post/vue_webpack_youhua 转载于:https://www.cnblogs.com/xiaohuizhang/p/10656034.html
Vue项目总结之webpack常规打包优化方案
11-30
本文将深入探讨如何使用Webpack进行常规的打包优化，以缩短项目的构建时间。 首先，我们需要理解打包慢的原因。这通常是因为Webpack在处理大量模块、资源和依赖时消耗了大量的时间和计算资源。为了解决这个问题，...
webpack打包优化详解
为了WLB努力
05-19 1206
先简单总结一下，优化Webpack打包可以通过多种方式来提高性能和减小文件大小。：将代码拆分成多个小块，使得在加载页面时只加载必要的代码。Webpack提供了多种代码分割的方法，如使用import()函数、插件等。：将不需要立即加载的模块延迟加载，提高页面初次加载速度。通常与代码分割一起使用。：使用Webpack的或等插件来压缩和混淆JavaScript代码，减小文件大小。：使用url-loader或来处理图片，可以将小图片转换为Data URL，或者通过图片压缩工具来减小图片大小。：通过。
vue webpack 打包优化方法
梁小茹的博客
04-26 1029
webpack打包优化方法
webpack打包nodejs项目的方法
10-17
以下是如何使用webpack打包Node.js项目，特别是针对那些使用ejs作为模板引擎并存在特定问题的项目。 **适用情况** 在某些项目中，Node.js作为后端服务器，使用ejs模板引擎生成整个页面并返回给用户。这种情况下，...
详解如何使用webpack打包多页jquery项目
11-30
虽然已经2019年了 不过有一些项目 还是需要用到jquery的 不过考虑到使用jquery的一堆兼容性问题 也为了可以顺利地使用ES6来撸代码 研究使用webpack+babel打包代码来发布 几个重点： 1.为了将模块分割加载，不至于一个js文件过大，一个页面中使用多个js文件 2.由于是多页项目（多个html），每个页面使用的js文件都不一致 基于以上两点，需要配置多个入口文件 3.会把小图片转换成base64，所以可能css转成的js文件会比较大，所以css文件都单独设置入口js 例如，我们有三个页面：index、share、assist 三个页面有通用的css文件：common.
简单地使用webpack进行打包
热门推荐
LPLIFE的博客
07-02 3万+
之前写的有些零散,现在一步步再重新写.一.确保已经安装了nodeJS之后.二. 创建webpack-demo,我的是f盘下的,2.然后进入这个文件夹:3.进行初始化,一路都是选择默认(回车就可以):查看初始化后的文件夹,里面只有一个json文件:4. 接下来装webpacknpm install webpack --save-dev安装完成:查看项目下,发现已经:5.然后用编译器打开当前项目...
webpack系列之webpack性能优化
追风Programer的博客
04-20 289
目录 写在前面 减少 Webpack 打包时间 优化loader HappyPack DllPlugin 代码压缩 其他 减少 Webpack 打包后的文件体积 按需加载 Scope Hoisting Tree Shaking 写在前面 在此文中，我不会浪费篇幅给大家讲如何写配置文件。如果你想学习这方面的内容，那么完全可以去官网学习。在这部分的内容中，我们会聚焦于以下...
如何使用webpack进行打包？（包括HTML、CSS、devserver、Vue、图片等）
jia嘉ioo的博客
03-28 1664
webpack打包
从零教你使用webpack，从此项目打包不用愁
m0_67391120的博客
03-06 681
webpack 问题 文件依赖关系错综复杂 静态文件请求效率低 模块化支持不友好 浏览器对高级JS特性兼容性不好 安装和配置 --save-dev 也可以写作 -D，表示是开发依赖（开发阶段需要用到的包，项目上线运行后不需要） 初始化项目 npm init -y 跟目录下新建 src 目录，作为代码文件目录 src 下新建 index.html和index.js index.html 中编写 html 代码 安装 jquerynpm i jquery 安装 webpack 通过命令npm insta
webpack优化项目
aofeibian3056的博客
08-19 82
在使用vue 构建项目的时候 ，会用到vue.js, vue-router.js, 等库，通常打包的话会将这些公用的代码打包的一个文件中，导致该文件过大影响加载的速度。那么可以考虑使用cdn 加速的方式将这些文件单独加载，在webpack4 中，配置比如 externals : { 'vue': 'Vue' }, 可以将该文件排除在打包文件之外。 在单页面应用中 可...
【原创】webpack如何优化vue项目
qq_34210479的博客
12-06 796
前言 日常开发中，Vue框架通常都会使用Webpack进行构建，随着项目不断迭代，项目逐渐变得庞大，然而项目的构建速度随之变得缓慢，于是对Webpack构建进行优化变得刻不容缓。通过适当的方法优化后，项目的构建速度提高了50%。现将相关优化方法进行总结分享。 一.优化loader配置 由于Loader对文件的转换操作很耗时，所以需要让尽可能少的文件被Loader处理。我们可以通过以下3方面优化Lo...
Webpack性能优化
富朝阳的博客
01-04 2677
最近接到一个老的项目，使用webpack构建的，构建打包居然需要11分钟，也就意味着每次上线至少在12分钟以上，每次上线简直就是折磨，明明可以早15分钟跑路，实在忍不了了，开干，卷起来，下面我记录了此次优化的一些方法，供大家参考。当然不仅仅路由可以按需加载，对于loadash这种大型类库同样可以使用这个功能。按需加载的代码实现这里就不详细展开了，因为鉴于用的框架不同，实现起来都是不一样的。当然了，虽然他们的用法可能不同，但是底层的机制都是一样的。都是当使用的时候再去下载对应文件，返回一个Promise，当。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值