All asstes will be under 'app/assets' not 'dist/assets' direcotry. We can process the files from dist/assets however the file will be dupicated with different name such as main.css and hashed file name main.dSf320909eK.css.
We will process all the assets with webpack pipeline in order to make them prioritize (preload and prefetch), pre-cache.
We can add to HTML file manually. Generating and injecting this directive by Webpack give us consistency on filename and path.
plugins: [
new HtmlWebpackPlugin({}),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'allAssets',
fileBlacklist: [/\.map/],
as: (entry) => {
if (/\.css$/.test(entry)) return 'style';
if (/\.ttf$/.test(entry)) return 'font';
if (/\.png$/.test(entry)) return 'image';
return 'script';
},
})
]
Fonts need to be preloaded in most of cases because if you start loading fonts from CSS, rendering will be blocked. Text will not appear until font file is downloaded. If we fonts are preloaded, CSS @font-face
does not have to fetch font file and uses it from memory cache.
- Easy to use
- Less configuration than other test frameworks.
- Component test
- Easy to setup
- Easy to integrate with travis CI
- Easy to setup
- Easy to integrate with coverall
- Work well with redux
- Track Network activity
- Watch user interactions in critical flows
- Works with React & Redux (Raven Middleware)
- Slack and email notification
- Nice GUI
- Integrate LogRocket
React component style Guide tool provides an autogenerated documentation about the components on your app directory. It shows all components with actual design and props information.
- Slack and email notification
- Nice GUI
- Service worker (Pre Cache)
- Redux state cache and offline
- Deploy to S3
- Server side rendering