The Formidable Playbook
best practices frontend backend webpack


Project Name formidable-playbook Project Url
InceptionYear 2016-09-06 21:46:03 更新时间 2017-09-14 05:45:39
IssueManagement Licenses MIT
仓库地址 git+ 用户数 0
Node Engine 文件大小 38.5 KB
install build-md-toc build-wp-clean build-wp-lib build-wp-app build-wp build server lint check-uncommitted check check-ci


This is our playbook. It is the foundation that allows us to architect & design systems that move our client projects forward. In it, you will find practical approaches for building frontend & backend javascript applications. This is a living document, and we intend to share our knowledge as we continue to work towards making the web a better place. - [The Architecture Playbook](#the-architecture-playbook) - [Have a single infrastructure](#have-a-single-infrastructure) - [The Frontend Playbook](#the-frontend-playbook) - [Webpack plugins](#webpack-plugins) - [Start with good base plugins](#start-with-good-base-plugins) - [Code splitting](#code-splitting) - [Shared libraries](#shared-libraries) - [Scope Hoisting](#scope-hoisting) - [Tree shaking](#tree-shaking) - [Source maps](#source-maps) - [Babel plugins - In Progress](#babel-plugins---in-progress) - [Other tools - In Progress](#other-tools---in-progress) - [Performance auditing - In Progress](#performance-auditing---in-progress) - [The Backend Playbook - In Progress](#the-backend-playbook---in-progress) ## The Architecture Playbook #### [Have a single infrastructure](docs/infrastructure/ A unified development effort should use a single infrastructure to control all similar projects. ## The Frontend Playbook Our frontend infrastructure is based around [webpack]( builds, but most of the guidelines / goals apply to any build tool. ### Webpack plugins #### [Start with good base plugins](docs/frontend/ Webpack has a rich plugin ecosystem, including both [core]( and [open source modules]( Webpack also has a straight forward interface to [write your own plugins]( A short list of plugin recommendations for best frontend performance include: | Plugin | Recommend? | Notes | | ------ | ---------- | ----- | | [`UglifyJsPlugin`](| Yes | Minimize code | | [`DedupePlugin`]( | Yes for v1 | Collapse identical code chunks to a single reference | | [`OccurrenceOrderPlugin`]( | Maybe for v1 | Reorder module and chunk ids by occurrence count | | [`DefinePlugin`]( | Maybe | Define constants for better optimization | | [`lodash-webpack-plugin`]( | Maybe | Optimize `lodash` | #### [Code splitting](docs/frontend/ [Code splitting]( is a Webpack feature that enables a JS bundle within a single build to be split up and loaded on-demand in smaller parts. Code splitting is appropriate within a single page and build. #### [Shared libraries](docs/frontend/ Webpack shared libraries are slightly different from code splitting scenarios in that the common dependencies are shareable across builds and require a two-part build. In a first step, a common shared bundle and manifest is created. Then, in a second step, entry points ingest the manifest and omit any libraries included in the shared bundle. Shared libraries are appropriate for better long term caching within a single app across deploys and across different projects / real HTML pages. #### [Scope Hoisting](docs/frontend/ Scope hoisted bundles try to place bundle modules into a global bundle scope so as to reduce the overhead of function calls for each bundled module. The problem and scope hoisting solutions are discussed in detail in Nolan Lawson's 2016 article ["The cost of small modules"]( #### [Tree shaking](docs/frontend/ [Tree shaking]( is a transformation process for [ES6 modules]( whereby ESnext `export`s that are not used in a Webpack bundle can be isolated during code bundling and removed entirely by Uglify dead code elimination. #### [Source maps](docs/frontend/ The Webpack [SourceMapDevToolPlugin]( creates [source maps](,-tools-and-other-info) which allows a developer to view / debug developer-friendly source code instead of the optimized, mangled, and minified JS bundle of a frontend web app. Source maps should be enabled for both development and production. ### Babel plugins - In Progress ### Other tools - In Progress ### Performance auditing - In Progress ## The Backend Playbook - In Progress


GroupId ArtifactID Version 引用量
Sebastian McKenzie babel-core 6.26.3 1211
Sebastian McKenzie babel-eslint 10.1.0 94536
Luis Couto babel-loader 8.1.0 106364
Sebastian McKenzie babel-preset-es2015 6.24.1 660
Thorsten Lorenz doctoc 1.4.0 807
Nicholas C. Zakas eslint 7.9.0 234945
baer eslint-config-formidable 4.0.0 94
Stefan Lau eslint-plugin-filenames 1.3.2 773
Ben Mosher eslint-plugin-import 2.22.0 96096
bigbluehat http-server 0.12.2 6008
Ryan Roemer webpack-stats-plugin 0.3.2 247