vue-react-的一些相关知识总结

最近的一年微信收藏的关于 vue 文章，大概过一下，顺带记个笔记

1. vue生命周期
   beforeCreate / created
   beforeMount / mounted
   beforeUpdate / updated
   beforeDestroy / destroy

2. 小程序生命周期
   onLoad onShow onReady
   onHide onShow onUnload

数据请求:
vue一般会在 created或者 mounted中请求数据，
而小程序会在 onLoad或者 onShow中请求数据。

React 中的 Transaction 设计: React 将整个的函数执行过程包裹上了 Transaction，在函数执行前与执行后分别有 initialize 和 close 两个方法。这样的话 React 就有时机在函数执行过程中，涉及到 setState 的执行，都将缓存下来，在 close 的时候进入到 React 的 state 更新逻辑进行更新判断操作，并最终更新到前台的 DOM 上。

webpack 打包体积优化: 依赖插件执行webpack分析json文件

webpack-bundle-analyzer => webpack–profile–json>stats.json

1. 设置环境变量 NODE_ENV 为 production

   plugins: [
       // ...
       new webpack.DefinePlugin({  
           'process.env': {
               NODE_ENV: JSON.stringify('production')
           }
       }),
       // ...
   ]

2. css-loader: css-loader 在 webpack 默认不开启压缩，需要设置 css-loader?minimize

   module: {
       rules: [
           {
               test: /\.css$/,
               use: ExtractTextPlugin.extract({
                   fallback: 'style-loader',
                   use: 'css-loader?minimize'
               })
           }
       ]
   }

antd: 因为并没有使用 antd 的所有组件，所以按需加载是必需的 => bebel-plugin-import

// 在 babel 配置中添加
{
    "plugins": [
        [
            "import", 
            {
                "libraryName": "antd", 
                "libraryDirectory": "es", 
                "style": "css"
            }
        ]
        // ...
    ]
}

3. moment： moment 库的体积开销主要是 i18n 文件，配置 webpack 将用不到 i18n 文件不打包即可

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

4. lodash: lodash看上去就是一些工具函数,也需要按需加载 => babel-plugin-lodash

   // 在 babel 配置中添加
   {
       "plugins": [
           "lodash"
           // ...
       ]
   }

5. webpack4 的两个坑
   extract-text-webpack-plugin => mini-css-extract-plugin

   - const ExtractTextPlugin = require('extract-text-webpack-plugin')
   + const MiniCssExtractPlugin = require('mini-css-extract-plugin')
   module.exports = {
     module: {
       rules: [
         {
           test: /\.css$/,
   -       use: ExtractTextPlugin.extract({
   -         use: [{
   -           loader: 'css-loader',
   -           options: {
   -             minimize: process.env.NODE_ENV === 'production'
   -           }
   -         }],
   -         fallback: 'vue-style-loader'
   -       })
   +       use: [
   +         MiniCssExtractPlugin.loader,
   +         {
   +           loader: 'css-loader',
   +           options: {
   +           minimize: process.env.NODE_ENV === 'production'
   +         }
   +       ],
         }
       ]
     },
     plugins:[
   -   new ExtractTextPlugin({
   +   new MiniCssExtractPlugin({
         filename: 'css/[name].css',
       }),
     ...
     ]
   }

html-webpack-plugin => 这个插件升级到最新版本，一般情况没啥问题，但是有个坑，最好是把chunksSortMode这个选项设置为none

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins:[
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      hash: true,
      chunksSortMode: 'none' //如果使用webpack4将该配置项设置为'none'
    })
  ]
}

node基于v8运行时只能是单线程
happypack => 可以使用多进程的方式运行loader，和压缩js

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // loader: 'babel-loader'
        loader: 'happypack/loader?id=babel'
      }
    ]
  },
  plugins: [
    new require('happypack')({
      id: 'babel',
      loaders: ['babel-loader']
    }),
  ],
};

赏

1分也是爱

微信