Build time in 1.3.1
See original GitHub issueEnvironment
"linaria": "^1.3.1", "webpack": "^4.30", "@babel/cli": "^7.4.3", "@babel/core": "^7.4.3", @babel/node": "^7.2.2", "react": "^16.8.6",
Description
After migration to 1.3.1 from 1.3.0 the build time increased in 5 times ๐ข. After analyzing changes in 1.3.1. suspicion fell on babel/evaluate.js.
In our project we have many โBaseโ components that use Styling custom components with interpplations, f.e. <LayoutContainer />
, <DisplayName />
, <Box />
e.c.
const Container = styled(LayoutContainer)<LayoutContainerProps>`
background-color: ${componentTheme.stripe.layoutContainerBackgroundColor};
border: ${componentTheme.stripe.layoutContainerBorder};
border-radius: ${baseTheme.radius};
margin: ${componentTheme.stripe.layoutContainerMargin};
align-items: stretch;
`;
The problem is when u create your custom components that based on a โBaseโ one and use interpolation, Prop based styles the evalute.js executes too many times, and this cause such result for build time ( on my opinion). I tried to output log in TaggedTemplateExpression.js console.log(state.file.opts.filename)
:
Only small part of the whole log Log.txt
Is this a bug or I am doing something wrong ? Thx
P.S. Currently, I have a bunch of circular decencies in the project. When I fix one the build time decreases on 10-20 sec. ๐ค Can it be a reason of the problem?
Reproducible Demo
babel.config webpack.dev.config.txt
linaria.config.js
module.exports = {
evaluate: true,
displayName: process.env.NODE_ENV !== 'production',
};
Issue Analytics
- State:
- Created 4 years ago
- Reactions:8
- Comments:38 (17 by maintainers)
Top GitHub Comments
Those are the build speeds from
emotion
vslinaria
for the same project. I justsed
the import for now.I fixed all circular deps, it reduced time on 30 sec. Now, with linaria 1.3.0 - 1.46m, after upgrade to 1.3.1 - 4.75. ๐