搭建Typescript+React项目模板(4) --- 项目打包

栏目: IOS · Android · 发布时间: 6年前

内容简介:经过前面的初始化,提升开发体验和集成了一堆工具,调整了项目结构等等之后,我们是时候考虑进行项目打包了。 在这篇博客中,我们不考虑开发环境和生产环境的配置分别,我们只看打包需要进行的配置项,所以我们需要做的如下: 0. 添加打包路径工具我们先去配置文件:

经过前面的初始化,提升开发体验和集成了一堆工具,调整了项目结构等等之后,我们是时候考虑进行项目打包了。 在这篇博客中,我们不考虑开发环境和生产环境的配置分别,我们只看打包需要进行的配置项,所以我们需要做的如下: 0. 添加打包路径工具

  1. 添加打包命令
  2. 进行css和js分离
  3. 修改 html-webpack-plugin 配置项
  4. 添加 react-loadablereact-router ,进行代码分离和按需加载
  5. 添加optimization,进行第三方库代码分离
  6. 进行代码压缩
  7. 关于 externals

添加打包命令

我们先去 webpack.config.js 中观察一下 output 这个配置项:

搭建Typescript+React项目模板(4) --- 项目打包
该配置项指定了打包路径和打包后的js文件名,在 webpack 的配置项中, output 是必须有的。 接着我们去到 package.json 中在 script 中添加打包命令 build ,该命令引用我们的 webpack.config.js

配置文件:

搭建Typescript+React项目模板(4) --- 项目打包
之后试试运行 npm run build

,会发现已经将项目打包出来了:

搭建Typescript+React项目模板(4) --- 项目打包

添加打包路径工具

在上一步中,我们已经知道打包出来的文件位于根目录下的 dist 文件夹中,所以这个路径 工具 的添加指向 dist 文件夹: 我们去到 build/utils.js 文件中,添加如下代码:

搭建Typescript+React项目模板(4) --- 项目打包

以后指定打包文件存放路径的时候就可以直接使用这个工具进行指定。

分离css文件

在上面打包的结果中,我们会发现只有一个 app.js 文件,而实际上我们是有写css样式的,但是现在的却并没有这个css文件,这是因为 webpack 将所有的资源(包含 js , css 等等)都看成是 chunk ,然后一起打包进一个文件中,这样会导致打包出来的js文件体积巨大,从而拖累页面的加载速度。

  1. webpack 4+ 版本中,我们可以使用 mini-css-extract-plugin 进行css代码的分离,所以首先安装它 npm install -D mini-css-extract-plugin
  2. 然后我们到 build/plugins.js 中添加这个插件:
    搭建Typescript+React项目模板(4) --- 项目打包
  3. 最后需要注意,之前在提升开发体验这一章中有提到过一点, style-loader 用于将 css-loader 编译出来的代码转为js代码并写入js文件中,所以在这里,我们需要用 mini-css-extract-plugin 中的loader去替换掉 style-loader ,让它写入单独的css文件而不是js文件中: 我们去到 build/rules/styleRules.js 中,将原本的 style-loader 全都替换成 mini-css-extract-plugin 的loader(这一步可以进行开发环境和生产环境的区分,在文章中不进行区分):
    搭建Typescript+React项目模板(4) --- 项目打包
    搭建Typescript+React项目模板(4) --- 项目打包
  4. 经过上面的步骤,我们可以打包进行测试: 运行 npm run build 可以发现打包结果中css文件已经进行了分离:
    搭建Typescript+React项目模板(4) --- 项目打包
    而在打包出来的 index.html 中也可以发现这个css文件被引入了:
    搭建Typescript+React项目模板(4) --- 项目打包
  5. 最后我们再在打包路径中将打包出来的js文件用js文件夹包裹起来即可:
    搭建Typescript+React项目模板(4) --- 项目打包
    搭建Typescript+React项目模板(4) --- 项目打包

修改 html-webpack-plugin 配置项

这一步主要用于压缩打包出来的 index.html 文件,但是单页面应用的话 html 内容其实不多,所以做不做也差不多,在本文章中也只是做个介绍:

  1. 首先在 html-webpack-plugin 中利用的是 html-minifier 来做压缩工作的,所以详细配置点击进去看即可,常用的如下:
    搭建Typescript+React项目模板(4) --- 项目打包
  2. 第二个需要提一下则是 inject 这个配置项,该项指定资源如何注入,我们直接使用默认的 true 即可,他会将js资源注入到 <body> 标签的底部,如果要注入到头部填写 head 即可

添加 react-loadablereact-router ,进行代码分离和按需加载

这一步和下一步都是在进行代码的拆分,考虑的是如果所有文件都塞进一个js文件中,会导致这个js文件体积臃肿,而单页面应用的所有构建又是依赖于这个js文件,所以需要进行代码分离,只加载当前页面需要构建的js文件。 通常来说,我们会根据 react-router 分的页面来进行代码分离,再用 react-loadable 进行分割出来的代码的异步加载(当然你也可以将所有组件都进行代码分离然后异步加载)。 所以在这里我们先利用 react-router 分两个页面 homepage 出来:

  1. 首先我们安装 react-router : npm install -S react-router-dom ,然后在 src/containers/views 中新建 HomePage 组件:
    搭建Typescript+React项目模板(4) --- 项目打包
    搭建Typescript+React项目模板(4) --- 项目打包
    搭建Typescript+React项目模板(4) --- 项目打包
  2. 接着安装 react-loadable : npm install -S react-loadable , 然后在 src/containers/shared 中新建 App 组件:
    搭建Typescript+React项目模板(4) --- 项目打包
    之后在里面的 index.tsx 中引用 react-routerreact-loadable 进行组件按需加载: 当然不要忘了使用 react-hot-loader :
    搭建Typescript+React项目模板(4) --- 项目打包
    这一步需要注意的是, Loadable 这个函数中的loading参数是必须有的,至于如何使用可以自行参考 react-loadable 的github链接。
  3. 这个时候去到页面看一下: 在 / 路径下,没有加载 page.js 这个文件,而切换到 /page 路径则会加载 page.js 文件,这个时候按需加载就完成了:
    搭建Typescript+React项目模板(4) --- 项目打包
    搭建Typescript+React项目模板(4) --- 项目打包
  4. 最后我们观察一下打包后的js文件可以发现已经进行了分离:
    搭建Typescript+React项目模板(4) --- 项目打包

会用 optimization 进行第三方库代码分离

optimization 是webpack4+版本中新出的配置项,这个配置项的功能主要是进行代码压缩,优化。 在本节中,我们需要将用到的处于 node_modules 中的第三方代码进行分离,在这里主要用到的是两个配置项 optimization.runtimeChunkoptimization.splitChunks ,其中 runtimeChunk 用于生成维系各各代码块关系的代码, splitChunks 则用于指定需要进行分块的代码,和分块后文件名。

  1. 我们去到 build 目录下,新建 optimization.js ,并添加如下代码:
    搭建Typescript+React项目模板(4) --- 项目打包
    然后在 webpack.config.js 中引入这个配置:
    搭建Typescript+React项目模板(4) --- 项目打包
  2. 最后我们打包试试看可以发现第三方代码都被打包进 vendor.js 文件中了:
    搭建Typescript+React项目模板(4) --- 项目打包
    你可以通过比对在添加 optimization 之前和之后打包出来的 app.js 文件来看出效果。

进行代码压缩

在这一步中,我们主要是做js和css的代码压缩和优化

  1. 在上面阶段中,我们打包出来的js代码是已经经过压缩的:
    搭建Typescript+React项目模板(4) --- 项目打包
    所以在这个阶段我们可以利用 uglifyjs-webpack-plugin 进行一些压缩优化: 首先我们需要安装 npm install -D uglifyjs-webpack-plugin ,然后去到 build/optimization.js 中添加如下代码即可,具体的优化见代码:
    搭建Typescript+React项目模板(4) --- 项目打包
    PS: 这里有一个点需要注意,在 uglifyjs-webpack-plugin 这个插件中,如果是2.x版本的话是不支持es6规范的,所以建议安装1.x版本,而我这里的版本是:
    搭建Typescript+React项目模板(4) --- 项目打包
  2. 然后我们进行css代码的压缩,这里需要使用到 optimize-css-assets-webpack-plugin 插件: npm install -D optimize-css-assets-webpack-plugin 。 我们先去 Home 组件中随意添加一个样式并使用它:
    搭建Typescript+React项目模板(4) --- 项目打包
    搭建Typescript+React项目模板(4) --- 项目打包
    然后再去到 build/optimization.js 添加如下代码:
    搭建Typescript+React项目模板(4) --- 项目打包
    具体的插件使用方式可以自行上github查看该插件。 最后查看打包出来后的css代码:
    搭建Typescript+React项目模板(4) --- 项目打包

到现在压缩代码步骤也做完了,最后将介绍一下 webpack.externals 这个选项。

关于 externals

webpack.externals配置项用于在构建过程中忽略一些常用包的集成,从而降低构建时间和打包后的包大小,它的配置也很简单,在本章中只做简单介绍: 在本项目中,我们可以将 reactreact-dom 添加进 externals 中,然后在html模板中引入它们的外部链接:

  1. 我们先去到 webpack.config.js 中,添加 externals 选项,并且把 reactreact-dom 添加进去:
    搭建Typescript+React项目模板(4) --- 项目打包
    这个配置项接收的是一个对象(其他形式请自行查阅webpack文档),对象的键是指webapck在获取这个模块时候 require 时候的参数,而对应的值则是标明你打算将这个模块挂载的变量名,这里是挂载在window对象中的。
  2. 去到 build/tpl/index.html 中,引入cdn中 reactreact-dom 的链接:
    搭建Typescript+React项目模板(4) --- 项目打包
  3. 重启项目,可以发现在 npm run dev 中能够正常使用,并且也已经引入了两者的外部资源:
    搭建Typescript+React项目模板(4) --- 项目打包
  4. 最后我们来对比一下打包后模块占用情况:
    搭建Typescript+React项目模板(4) --- 项目打包
    搭建Typescript+React项目模板(4) --- 项目打包
    再来对比一下两者打包出来的包体积大小:
    搭建Typescript+React项目模板(4) --- 项目打包
    搭建Typescript+React项目模板(4) --- 项目打包

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Visual C# 2008入门经典

Visual C# 2008入门经典

James Foxall / 张劼 / 人民邮电出版社 / 2009-6 / 39.00元

《Visual C#2008入门经典》分为五部分,共24章。第一部分介绍了Visual C# 2008速成版开发环境,引导读者熟练使用该IDE;第二部分探讨如何创建应用程序界面,包含窗体和各种控件的用法;第三部分介绍了编程技术,包括编写和调用方法、处理数值、字符串和日期、决策和循环结构、代码调试、类和对象的创建以及图形绘制等;第四部分阐述了文件和注册表的处理、数据库的使用和自动化其他应用程序等;第......一起来看看 《Visual C# 2008入门经典》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具