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

时间 2019-11-07

标签搭建 typescript+react typescript react 项目模板打包栏目 React 繁體版

原文原文链接

项目地址

前言

通过前面的初始化，提高开发体验和集成了一堆工具，调整了项目结构等等以后，咱们是时候考虑进行项目打包了。在这篇博客中，咱们不考虑开发环境和生产环境的配置分别，咱们只看打包须要进行的配置项，因此咱们须要作的以下: 0. 添加打包路径工具git

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

添加打包命令

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

该配置项指定了打包路径和打包后的js文件名，在 webpack的配置项中， output是必须有的。接着咱们去到 package.json中在 script中添加打包命令 build，该命令引用咱们的 webpack.config.js配置文件:

以后试试运行 npm run build，会发现已经将项目打包出来了:

添加打包路径工具

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

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

分离css文件

在上面打包的结果中，咱们会发现只有一个app.js文件，而实际上咱们是有写css样式的，可是如今的却并无这个css文件，这是由于webpack将全部的资源(包含js, css等等)都当作是chunk，而后一块儿打包进一个文件中，这样会致使打包出来的js文件体积巨大，从而拖累页面的加载速度。web

在webpack 4+版本中，咱们可使用mini-css-extract-plugin进行css代码的分离，因此首先安装它npm install -D mini-css-extract-plugin。
而后咱们到build/plugins.js中添加这个插件：
最后须要注意，以前在提高开发体验这一章中有提到过一点，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(这一步能够进行开发环境和生产环境的区分，在文章中不进行区分):
通过上面的步骤，咱们能够打包进行测试: 运行npm run build能够发现打包结果中css文件已经进行了分离:

而在打包出来的index.html中也能够发现这个css文件被引入了:
最后咱们再在打包路径中将打包出来的js文件用js文件夹包裹起来便可:

修改`html-webpack-plugin`配置项

这一步主要用于压缩打包出来的index.html文件，可是单页面应用的话html内容其实很少，因此作不作也差很少，在本文章中也只是作个介绍:npm

首先在html-webpack-plugin中利用的是html-minifier来作压缩工做的，因此详细配置点击进去看便可，经常使用的以下:
第二个须要提一下则是inject这个配置项，该项指定资源如何注入，咱们直接使用默认的true便可，他会将js资源注入到<body>标签的底部，若是要注入到头部填写head便可

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

这一步和下一步都是在进行代码的拆分，考虑的是若是全部文件都塞进一个js文件中，会致使这个js文件体积臃肿，而单页面应用的全部构建又是依赖于这个js文件，因此须要进行代码分离，只加载当前页面须要构建的js文件。一般来讲，咱们会根据react-router分的页面来进行代码分离，再用react-loadable进行分割出来的代码的异步加载(固然你也能够将全部组件都进行代码分离而后异步加载)。因此在这里咱们先利用react-router分两个页面home和page出来：

首先咱们安装react-router: npm install -S react-router-dom，而后在src/containers/views中新建Home和Page组件:
接着安装react-loadable: npm install -S react-loadable, 而后在src/containers/shared中新建App组件:

以后在里面的index.tsx中引用react-router和react-loadable进行组件按需加载: 固然不要忘了使用react-hot-loader:

这一步须要注意的是，Loadable这个函数中的loading参数是必须有的，至于如何使用能够自行参考react-loadable的github连接。
这个时候去到页面看一下：在/路径下，没有加载page.js这个文件，而切换到/page路径则会加载page.js文件，这个时候按需加载就完成了:
最后咱们观察一下打包后的js文件能够发现已经进行了分离:

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

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

咱们去到build目录下，新建optimization.js，并添加以下代码:

而后在webpack.config.js中引入这个配置:
最后咱们打包试试看能够发现第三方代码都被打包进vendor.js文件中了:

你能够经过比对在添加optimization以前和以后打包出来的app.js文件来看出效果。

进行代码压缩

在这一步中，咱们主要是作js和css的代码压缩和优化

在上面阶段中，咱们打包出来的js代码是已经通过压缩的:

因此在这个阶段咱们能够利用uglifyjs-webpack-plugin进行一些压缩优化: 首先咱们须要安装npm install -D uglifyjs-webpack-plugin，而后去到build/optimization.js中添加以下代码便可，具体的优化见代码:

PS: 这里有一个点须要注意，在uglifyjs-webpack-plugin这个插件中，若是是2.x版本的话是不支持es6规范的，因此建议安装1.x版本，而我这里的版本是:
而后咱们进行css代码的压缩，这里须要使用到optimize-css-assets-webpack-plugin插件:npm install -D optimize-css-assets-webpack-plugin。咱们先去Home组件中随意添加一个样式并使用它:

而后再去到build/optimization.js添加以下代码:

具体的插件使用方式能够自行上github查看该插件。最后查看打包出来后的css代码:

到如今压缩代码步骤也作完了，最后将介绍一下webpack.externals这个选项。

关于`externals`

webpack.externals配置项用于在构建过程当中忽略一些经常使用包的集成，从而下降构建时间和打包后的包大小，它的配置也很简单，在本章中只作简单介绍: 在本项目中，咱们能够将react和react-dom添加进externals中，而后在html模板中引入它们的外部连接:

咱们先去到webpack.config.js中，添加externals选项，而且把react和react-dom添加进去:

这个配置项接收的是一个对象(其余形式请自行查阅webpack文档)，对象的键是指webapck在获取这个模块时候require时候的参数，而对应的值则是标明你打算将这个模块挂载的变量名，这里是挂载在window对象中的。
去到build/tpl/index.html中，引入cdn中react和react-dom的连接:
重启项目，能够发如今npm run dev中可以正常使用，而且也已经引入了二者的外部资源:
最后咱们来对比一下打包后模块占用状况:

再来对比一下二者打包出来的包体积大小: