webpack坑

react next原理分析

extjs是react进行服务端渲染的一个工具，默认以根目录下的pages为渲染路由

比如我在pages目录下创建一个index.js文件，然后export default一个组件，就会在页面上呈现出来这个组件

这个特性作为他最知名的优点，所以被人认为是一个很很好的后端渲染工具

多用一段时间，会踩到一些坑，功能都不是白用的，想用那么牛逼的东西，要是知道的太肤浅，驾驭不了也很难受。

所以我们不得不深入了解一下

2. webpack config

用脚趾头想一下，要让react代码在服务端跑，还不是得用webpack编译嘛

所以nextjs内部肯定偷偷的封装了一层webpack的编译工具

next怎么去配置webpack呢

方法1

在更目录下的next.config.js里写配置

方法2

写个自定义的server 然后执行

比如第一种张这个样子

复制代码

const path = require('path')

const webpack = require('webpack')

const withTs = require('@zeit/next-typescript')

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

module.exports = withTs({

webpack(config) {

config.resolve.alias = {

'styled-components': path.resolve('node_modules', 'styled-components')

}

if (process.env.ANALYZE) {

config.plugins.push(

new BundleAnalyzerPlugin({

analyzerMode: 'server',

openAnalyzer: true

})

)

}

config.plugins.push(new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/))

config.plugins.push(new webpack.EnvironmentPlugin(['ENV']))

return config

}

})

复制代码

第二种样子会特别一点，只需要注意中间let conf的那一段代码就好了

React Next 是基于 React 的一个前端框架，它与 React 的工作原理类似，但具有一些额外的特性，如按需加载组件和异步渲染等。

React Next 的原理分析如下：

1. 在构建应用时，使用 create-react-app 创建项目，或者手动配置 webpack 和 babel。

2. 在构建应用时，React Next 会将所有组件打包成一个或多个 JavaScript 文件。

3. 在运行时，React Next 会根据路由和参数等信息，按需加载需要的组件。

4. 当需要渲染组件时，React Next 会异步加载该组件及其依赖的组件和资源。

5. 在渲染组件时，React Next 会使用 React DOM 或其他渲染器进行渲染。

6. 在渲染完成后，React Next 会将页面输出到浏览器中，并更新 DOM 以显示最新的内容。

总的来说，React Next 的工作原理就是在构建应用时将所有组件打包在一起，但在运行时按需加载需要的组件和资源，并进行异步渲染。这样可以提高应用的性能和加载速度，并减少不必要的资源浪费。