Skip to content
This repository was archived by the owner on Mar 22, 2019. It is now read-only.

list of hints.cn

Jump to bottom
e-cloud edited this page Jun 26, 2016 · 1 revision

Notes: 注意事项：

Not every hint apply to all apps. Some hints have positive and negative effects so it depends on your needs. 不是每个提示都适用于所有的应用程序。一些提示有正面和负面作用，因此要看你的需求。

Hints are ordered by importance (most important comes first), but importance heavily depends on the app. 提示以重要性排序（最重要的排前面），但重要性在很大程度上取决于应用程序。

Hints are categorized by App, Developer and/or Build performance. Sometimes multiple categories apply. 提示是以应用程序，开发者和/或构建性能分类。有时多个类别都适用。

App performance: Your app perform better. This affects the user of your app and/or the cost of serving the app to the user. 应用性能：你的应用表现更佳。这会影响您的应用程序和/或提供应用程序给用户的成本。

Developer performance: This makes it easier for your developers to write the app. 开发者效率：让你们开发人员更容易地编写应用程序。

Build performance: The build of your app is faster and/or more stable. 构建性能：你的应用程序的构建速度更快和/或更稳定。

App performance

应用性能

  • Minimize your bundle with the UglifyJsPlugin (App, for every app)

  • 使用UglifyJsPlugin减少 bundle 的大小（应用，针对所有应用）

  • Use Code Splitting: improves initial download size, at the cost of more requests (App, for big apps)

  • 使用代码拆分：优化初始下载的大小，带来更多的请求成本（应用，针对大型应用）

    • Hint for React apps: Use the react-proxy-loader
    • React 应用的提示：使用 react-proxy-loader

  • Add hashes to output files and enable Long Caching time on server: improves times for second visit (App, for every app)

  • 添加哈希到输出文件，并启用服务器长期缓存：改善大量二次访问（应用，针对每个应用）

    • Hint: Use records to keep module/chunk ids as consistent as possible

    • 提示：使用记录，来保证模块/分块的id尽量保持一致

    • Hint for static HTML pages: Use the html-webpack-plugin

    • 静态HTML页面的提示：使用 html-webpack-plugin

  • Don't delete no longer used assets immediately after they are no longer used. Wait a few weeks before deleting them from server. Result: No 404s for users that keep browser windows open for long time (App, for every app)

  • 不要将不再使用的资源在不再使用后立即删除。从服务器上删除之前，请等待几个星期。结果：保持浏览器窗口长时间开启的用户不会受到404（应用，针对每个应用程序）

  • Use the DefinePlugin to pass configuration from config to app: Embedded into bundle, Conditional code is removed with minimized (App, for apps with configuration)

  • 使用DefinePlugin来从配置文件到应用程序传递配置：嵌入 bundle 的条件代码在压缩后会被删除（应用，针对带配置的应用）

    • Use the EnvironmentPlugin to pass process.env from build to app
    • 使用EnvironmentPlugin来从构建传递process.env到应用

  • Check bundle stats with analyse tool for problems: Improve total download size, Improve cohesion (App/Developer, for big apps)

  • 遇到问题，使用分析工具检查打包状态：优化总下载量的大小，提高代码内聚性（应用/开发者，针对大型应用）

    • Hint: Use the stats-webpack-plugin or the --json CLI option to get the stats

    • 提示：使用stats-webpack-plugin或CLI的--json选项来获得的统计数据

    • Hint: Use the profile option to gather more performance stats

    • 提示：使用profile选项，以收集更多的性能统计信息

  • Extract common modules into separate script file: improves caching for switching between pages, at the cost of additional requests for the initial page (App, for app with multiple entry points)

  • 提取通用模块到单独的脚本文件：页面之间切时换优化缓存，带来初始页面额外请求的成本（应用，针对有多个入口点的应用程序）

  • Remove duplication with npm dedupe/npm 4 and the DedupePlugin: improve total download size (App, for app using npm)

  • 用NPM dedupe或者NPM 4和DedupePlugin删除重复的模块：提高总下载大小（应用程序，针对使用NPM应用程序中）

  • Do CSS processing with webpack: (App/Developer, for every app)

  • 使用 webpack 进行 css 处理：（应用/开发者，针对每个应用）

    • static assets (font/image/...) processing with webpack. (for every app)

    • 静态资源（字体/图像/ ...）使用 webpack 处理。（针对每个应用程序）

      • inline static assets with the url-loader: improves time to initial view (by reducing roundtrips), at the cost of total download size (for every app)
      • 使用 url-loader 内联静态资源：优化首屏加载时间（减少请求），带来总下载量增加的成本。（针对每个应用程序）

    • Separate CSS file with the extract-text-webpack-plugin: eliminates FOUC for prerendered markup, improves time to initial view (by parallizing CSS and JS downloading) (for app with many CSS or prerendered content)

    • 使用 extract-text-webpack-plugin 分离 css文件：为预渲染的标签消除 FOUC(Flash Of Unstyled Content)，优化首屏加载时间（同步下载css与js文件）（针对有许多CSS的应用程序或预渲染的内容）

  • Fit the chunking to your needs via many Code Splitting Points and the chunk optimization plugins (LimitChunkCountPlugin, MinChunkSizePlugin, AggressiveMergingPlugin, )

  • 通过多个代码分割点和分块块优化插件，优化分块以适应您的需求（LimitChunkCountPlugin，MinChunkSizePlugin，AggressiveMergingPlugin）

  • Preload additional chunks by adding a script tag and deferring the chunk load: Faster initial view (App, for routed apps)

  • 通过添加脚本标签预加载额外分块，并推延分块的正式加载：更快的首屏加载（应用程序，针对有路由的应用程序）

Developer performance

开发者效率

  • Use a configuration file (webpack.config.js) instead of passing CLI options: Easier to maintain, more options (Developer, for every app) *使用一个配置文件（webpack.config.js），而不是通过命令行选项：更容易维护，更多选项（开发者，对于每一个应用程序）

  • Don't rewrite incompatible JS, but use imports-loader/exports-loader to make it compatible: Easier to upgrade to new version (Developer, for every app)

  • 不要重写不兼容的JS，但使用imports-loader /exports-loader使其兼容：更容易升级到新版本（开发者，对于每一个应用程序）

  • Use webpack devtools for debugging in browser: Better debugging experience, real source code, real module names, at the cost of slower build and difference to production build (Developer, for every app) *在浏览器中调试时使用 webpack devtools：更好的调试体验，真实源代码，真实模块名称，带来的成本是较慢的构建和跟发布版本不一致（开发者，对于每一个应用程序）

  • Write modules with ES6 module syntax: This is more future proof and allows more advanced optimizations (Developer/App/Build, for every app)

  • 以ES6语法编写模块：更长远的保障，并允许更高级的优化（开发/应用/构建，对于每一个应用程序）

    • Current Status: Use the babel-loader to transform ES6 module syntax to CommonJS

    • 目前状态：使用babel-loader转换ES6模块语法为CommonJS的

    • Future: webpack 2 understand ES6 module syntax

    • 未来：webpack 2 理解 ES6模块语法

    • Future: webpack enables advanced optimizations

    • 未来：webpack 允许高级优化

  • Use output.library to build libraries that export stuff (Developer, for libraries) *使用output.library构建带输出的库（开发者，针对代码库）

  • Use externals to declare dependencies of your bundle on the target environment (Developer, for libraries and apps)

  • 使用externals声明 bundle 在目标环境中的依赖（开发者，库和应用）

  • Enable Hot Module Replacement (HMR) for faster page updates (Developer, for every app)

  • 启用热模块替换（HMR）以便更快的页面更新（开发者，对于每一个应用程序）

    • Hint for React apps: Use the react-hot-loader or react-transform

    • 对 React 应用的提示：使用react-hot-loader或react-transform

    • Hint for CSS: Use the style-loader (without extract-text-webpack-plugin) for HMR

    • 对 CSS 的提示：为HMR使用style-loader（不要用extract-text-webpack-plugin）

    • Hint for custom routers: Write custom handlers for updates at least at router level

    • 定制路由器的提示：至少在路由器级写更新的自定义处理程序

  • Use Javascript in webpack config to share common configuration etc. (Developer, for every app)

  • 在 webpack 配置使用 JavaScript 以共享公共配置。（开发者，对于每一个应用程序）

  • Use resolve.root to configure a path to your app modules: Allows shorter references to dependencies (Developer, for big apps)

  • 使用resolve.root配置路径指向你的应用程序模块：允许较短的依赖引用（开发者，对于大型应用）

  • Use karma with karma-webpack to test modules in the browser (Developer, for every app)

  • 使用 karma（结合karma-webpack）在浏览器中测试模块（开发者，对于每一个应用程序）

  • Use target to build for other environments than the browser (Developer, for non-browser apps)

  • 使用target为其他不是浏览器的环境进行构建（开发者，对于非浏览器应用程序）

  • Use the BannerPlugin to add comments to the output assets: Licensing (Developer, for libraries)

  • 使用BannerPlugin将注释添加到输出资源：许可（开发者，库）

  • Use debug to switch loaders to debug mode which provide more debug information (if the loader supports it): Better debugging experience (Developer, for every app)

  • 使用debug切换到 loader 的调试模式，以提供更多的调试信息（如果 loader 支持的话）：更好的调试体验（开发者，对于每一个应用程序）

  • Use include instead of exclude in module.loaders: less error prone and easier to add paths (Developer, for every app)

  • 在module.loaders使用include而不是exclude：不容易出错，更容易添加路径（开发者，对于每一个应用程序）

Build performance

构建性能

  • Use incremental compilation: faster second build (Build, for every app)

  • 使用增量编译：更快增量构建（构建，每一个应用程序）

    • Hint: Switch watching to polling with the watchOptions.poll option only if watching over network or inside of VMs
    • 提示：如果仅通过网络或内部虚拟机监视，切换监视至watchOptions.poll选项

  • Use in-memory compilation for development build: faster build, less disk usage, at the cost of memory usage (Build, for every app)

  • 为开发时构建使用内存编译：构建更快，更少的磁盘使用情况，但有内存使用成本（建设，对于每一个应用程序）

    • Hint: Use the webpack-dev-server
    • 提示：使用 webpack-dev-server

  • Use multiple entry points instead of running webpack multiple times: Faster build, entry points can share chunks (Build/App, for multi page apps)

  • 使用多个入口点，而不是多次运行 webpack：更快的构建，切入点可以共享分块（编译/应用程序，对于多页的应用程序）

  • Pass an array of configurations to webpack to compile them in parallel while sharing disk cache and watchers: Faster builds and rebuilds, less problems with too many watchers (Build, for big apps with multiple configurations)

  • 向 webpack 传递一组配置以进行并行编译，同时共享磁盘缓存和文件监视器：更快的构建和重建，更少的关于过多文件监视器的问题（构建，对有多个配置的大型应用）

  • Use module.noParse for big CommonJS files without dependencies: Faster build times (Build, for app with these modules)

  • 对没有依赖关系的 CommonJS 的大文件使用module.noParse：更快的构建时间（构建，针对使用这些模块的应用程序）

Unsorted

##未分类

Feel free to add more hints to any category. If you were to add it or in which order you can add it to the Unsorted section and some more experienced user will pick it up. 随意添加更多的提示到任何类别。如果你不清楚以何种顺序添加，可以将其添加到Unsorted部分，一些有经验的用户会将它分类好。

Clone this wiki locally