webpack4+React16项目构建(二)

原创 Lin_Grady 教程 webpack 65阅读 2018-11-12 13:23:41 举报

PS: 2018/12/12 修改细节布局

引入React

首先安装React环境库

react和react-dom的区别

  • react是核心代码,只包含了定义组件的方法如React.createElement,.createClass,.Component,.children以及其他元素和组件类。
  • react-dom是渲染代码,包括ReactDOM.render,.unmountComponentAtNode和.findDOMNode等实现将虚拟DOM渲染到界面

react-router和react-router-dom的区别

  • react-router: 实现了路由的核心功能
  • react-router-dom: 基于react-router,加入了在浏览器运行环境下的一些功能,例如:Link组件,会渲染一个a标签,Link组件源码a标签行; BrowserRouter和HashRouter组件,前者使用pushState和popState事件构建路由,后者使用window.location.hash和hashchange事件构建路由。
  • react-router-native: 基于react-router,类似react-router-dom,加入了react-native运行环境下的一些功能。

开始使用

修改index.html如下

修改index.js,引用React语法写个简单例子

到此还没结束,我们还需要安装下面babel依赖配置webpack环境才能正常打包运行

粗略讲解一下各个依赖干嘛的

  • babel-core是作为babel的核心,把 javascript 代码分析成 AST (抽象语法树, 是源代码的抽象语法结构的树状表现形式),方便各个插件分析语法进行相应的处理
  • babel-loader也是核心插件,允许使用Babel和webpack转换JavaScript文件
  • babel-preset-env基于你的实际浏览器及运行环境,自动的确定babel插件及polyfills,转译ES2015及此版本以上的语言
  • babel-preset-react编译react代码

注意: 因为babel-core@7+还不稳定,所以默认安装@6+,需要babel-loader@7+才能运行,所以上面指定了版本

根目录新增.babelrc 配置文件,babel所有的操作基本都会来读取这个配置文件,如果没有这个配置文件,会从package.json文件的babel属性中读取配置。

注意: 因为Tree Shaking这个功能是基于ES6 modules 的静态特性检测,来找出未使用的代码,所以如果你使用了 babel 插件的时候,如:babel-preset-env,它默认会将模块打包成commonjs,这样就会让Tree Shaking失效了,所以我们要设置一下关闭 Babel 的模块转换功能,保留原本的 ES6 模块化语法。

我们还要去webpack.common.js配置loader,完整配置如下

继续使用上一章配置过命令和当前依赖文件package.json, 完整代码如下:

打开终端执行命令

运行dist目录下的index.html文件可以查看效果

项目拓展

接下来继续展开代码,按照正常项目开发使用ES6方式开发和引用资源处理,首先我们分门别类区分一下资源
index.js修改如下:

新增main.js文件代码如下:

在jsx里相对路径的图片不会被file-loader和url-loader处理,所以我们使用这种写法引入比较方便

style.scss如下:

修改一下webpack.common.js图片处理,使用url-loader将50kb内的图片转成base64编码保存进代码减少请求,不符合条件的打包图片放到一个单独文件夹img,因为url-loader内置有file-loader,所以我们不必要再引入

重新执行命令

打开页面会看到1.jpg变成base64代码,一切都在预期内.

使用路由

根目录新增router文件夹,里面创建index.js,代码如下:

然后收拾一下main.js页面,把多余生命周期清除掉

分别新增page1.jspage2.js,main.js的图片分别迁移进去新目录component

最后src目录下的index.js修改如下:

现在整个目录结构如下

执行命令

一个简单的路由切换页面就完成了,界面大概如下

图片压缩

上面我们只是将小于50kb的图片内嵌进代码里,超过50kb的图片我们可以引入插件作处理

然后我们在修改一下loader配置

注意顺序,这种写法会先经过压缩之后再有url-loader作处理,能够让部分原本不符合大小的图片压缩之后就满足转码base64了,为了突出效果限制到20kb内.
以我的测试图为例,压缩率达到

80.4kb -> 45.9kb

至于其他图片配置可根据自己需求修改

解析(resolve)

随着文件越来越多,引用路径越来越复杂,会容易让人混乱,我们可以使用resolve做些依赖处理,这些选项能设置模块如何被解析
webpack.common.js新增下面配置代码,设置简化路径

然后我们就可以修改对应的文件引入模块写法,例如

其他可自行修改

打包文件性能可视化

目前基本搭建完了,然后我们就可以利用一款检测打包性能的插件找到可优化空间

在webpack.server.js新增依赖

plugins里初始化方法

执行命令会自动打开页面http://127.0.0.1:8888/,这里可以看到性能图,不影响原本的http://localhost:9000/#/查看项目

CSS优化

webpack4使用插件和之前版本不一样,我们安装以下依赖

修改一下webpack.common.js的配置

执行命令之后就看到有新的样式文件独立出来了

提取公共库

从webpack4开始官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,再生产环境下回自动开启,只需要设置

从文档来看它的默认设置是这样的

New chunk can be shared OR modules are from the node_modules folder
New chunk would be bigger than 30kb (before min+gz)
Maximum number of parallel requests when loading chunks on demand would be lower or equal to 5
Maximum number of parallel requests at initial page load would be lower or equal to 3

新chunk是能够被共享或者来自node_modules文件
新chunk在min+gz压缩之前大于30kb
按需加载的并行请求数小于等于5
首屏渲染的最大并行请求数小于等于3

因为现在demo比较小,没什么好讲解的,一般根据项目情况调整一下拆分机制就好了,假如我想要把node_modules和组件代码拆分出来,可以这么写

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复