（筆記）再次碰頭 webpack

gracekrcx commented 3 years ago

緣由

這次學習發佈 component library 沒想到對 bundle 又再次的學習底下紀錄問題

1. 為什麼 npm publish 只有這些檔案上 NPM

package.json 裡的 files 定義輸出哪個資料夾，通常會是 dist

 "files": [
    "LICENSE",
    "README.md",
    "build-info.json",
    "index.js",
    "cjs/",
    "umd/",
    "jsx-runtime.js",
    "jsx-dev-runtime.js",
    "unstable-cache.js"
  ],

另外，main 則是，指定程式的進入位置

{
  "main": "dist/index.js"
}

// or
{
   "main": "index.js",
}

參考文章 npm publish過濾部分文件

2. Introducing Code Splitting

如果把所有 50 個 component 都打包在同一隻 js，那如果有專案只用到 2 個 component 那是不是不太划算
app.js 拆分成 home.js 和 profile.js 各自依頁面載入

參考文章 Creating a React Component Library using Rollup, Typescript, Sass and Storybook Webpack 帶我飛 Code Splitting

3. peerDependencies

如果你安装了我，那麼你最好也安装 X, Y 和 Z，就是這樣的解釋

參考文章 探討npm依賴管理之peerDependencies

要看看 react 怎麼打包他們的專案嗎 XD react/package.json 可以看出有使用 rollup

export {
  Children,
  createMutableSource,
  createRef,
  Component,
  PureComponent,
  createContext,
  forwardRef,
  lazy,
  memo,
  useCallback,
  useContext,
  useEffect,
  useImperativeHandle,
  useDebugValue,
  useLayoutEffect,
  useMemo,
  useMutableSource,
  useReducer,
  useRef,
  useState,
  REACT_FRAGMENT_TYPE as Fragment,
  REACT_PROFILER_TYPE as Profiler,
  REACT_STRICT_MODE_TYPE as StrictMode,
  REACT_DEBUG_TRACING_MODE_TYPE as unstable_DebugTracingMode,
  REACT_SUSPENSE_TYPE as Suspense,
  createElement,
  cloneElement,
  isValidElement,
  ReactVersion as version,
  ReactSharedInternals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
  // Deprecated behind disableCreateFactory
  createFactory,
  // Concurrent Mode
  useTransition,
  startTransition,
  useDeferredValue,
  REACT_SUSPENSE_LIST_TYPE as SuspenseList,
  REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
  // enableBlocksAPI
  block,
  // enableFundamentalAPI
  createFundamental as unstable_createFundamental,
  // enableScopeAPI
  REACT_SCOPE_TYPE as unstable_Scope,
  useOpaqueIdentifier as unstable_useOpaqueIdentifier,
};

gracekrcx commented 3 years ago

Webpack 的Bundle Split 和Code Split 區別和應用

optimization.splitChunks node_modules 裡的依賴分離到 vendors
webpack.HashedModuleIdsPlugin 再把依賴也分開打包
將不必要加載的模塊延遲加載 Dynamic Imports

gracekrcx commented 3 years ago

webpack 二三事：如何讓 CommonsChunkPlugin() 發揮最大效益防止重複

Webpack-Dll-Plugin 介紹減少打包時間

徹底解決Webpack打包性能問題介紹 webpack.DllPlugin 如何在開發時，對第三方套件，不重複打包，因為開發時動的是業務邏輯，如果每次 save 都需要重新打包第三方套件，不太合裡

speed-measure-webpack-plugin 測量 webpack 構建期間各個階段花費的時間入口文件的代碼不要超過 200K

How to set multiple file entry and output in project with webpack?

gracekrcx commented 3 years ago

如何提升 Webpack 打包速度

代碼分割 (webpack.optimize.CommonsChunkPlugin)

入口文件依賴的 node_modules 內容打包到 common 中，將業務代碼進行單獨打包，這樣可以有效減少 app.js 的體積

wepack 的打包優化沒有固定的模

分塊、拆包、壓縮等，常見的優化思路主要分為四部分

優化搜索時間，即開始打包時獲取所有的依賴模塊的時間優化解析時間，即根據配置的 loader 解析相應文件所花費的時間優化壓縮時間，即 wepack 對代碼進行優化壓縮所花費的時間優化二次打包時間，即重新打包時所花費的時間

gracekrcx commented 3 years ago

好的，打包完成，打包了整個世界 : webpack增量打包多頁應用

但我們用 git 不就是要清楚我們動了哪些地方嗎？

gracekrcx commented 3 years ago

Webpack 2 實作筆記 (1) — 安裝與設定 webpack 自己架

gracekrcx commented 3 years ago

在 Create React App 使用 npm link 引入 rollup 打包的包含 hooks 寫法的 component，一直出現 ‘Hooks can only be called inside the body of a function component.’ 最後

不使用 Create React App，用自己設定的 reactJS 環境 minimal-reactjs-boilerplate Don't use create-react-app: How you can set up your own reactjs boilerplate.
在 rollup config 設定 ‘external’ 和 ‘peerDependencies’ SOLVING REACT HOOKS' INVALID HOOK CALL WARNING

gracekrcx commented 3 years ago

umijs/father Library toolkit based on rollup, docz, storybook, jest, prettier and eslint.

Rollup打包工具的使用（超详细，超基础，附代码截图超简单）

rollup+antd构建npm包

gracekrcx commented 3 years ago

你的 JS 該減肥了！很適合用來檢查專案，最近也看了一些 webpack 東西，less-loader 永遠不會忘記你

gracekrcx commented 1 year ago

package.json dependencies version

version Must match version exactly ^version ~version

^：鎖住第一碼 (即A) 不得變更。

如^1.2.2，則安裝範圍是>=1.2.2 且 <2.0.0。即須符合1.*.*。

~：鎖住第二碼 (即B) 不得變更。

如~1.2.2，則安裝範圍是>=1.2.2且<1.3.0。即須符合1.2.*。

For example, these are all valid:

{
  "dependencies": {
    "foo": "1.0.0 - 2.9999.9999",
    "bar": ">=1.0.2 <2.1.2",
    "baz": ">1.0.2 <=2.3.4",
    "boo": "2.0.1",
    "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
    "asd": "http://asdf.com/asdf.tar.gz",
    "til": "~1.2",
    "elf": "~1.2.3",
    "two": "2.x",
    "thr": "3.3.x",
    "lat": "latest",
    "dyl": "file:../dyl"
  }
}

What's the difference between tilde(~) and caret(^) in package.json? 圖很漂亮

gracekrcx / weekly-notes