I have a Vue CLI 3 project, with lazy loading for the components. When running npm run build and serving the dist folder, I see that a CSS file is first prefetched and then loaded:
<link href="/css/article.70090a14.css" rel="prefetch">
and
<link rel="stylesheet" type="text/css" href="/css/article.70090a14.css">
This is the default behaviour of the Webpack config when executing npm run build. At the moment Lighthouse (Google's audit tool) is complaining and advises me the following:
"Preload key requests: /css/article.70090a14.css"
My question is, how can I add to / change this behaviour to do a preload instead of a prefetch?
You can use this plugin to prefetch css files:
https://github.com/MarvelSQ/html-prefetch-css-webpack-plugin
or
you can use style-loader to integrate css into js file and then prefetch js file using webpackPrefetch magic comment:
import(/* webpackPrefetch: true */ "...")
Related
I'm following this tutorial Add Loading Indicators to Your Vue.js Application to add NProgress to my Vue app. In the tutorial, it adds the following code to index.html:
<link href="https://unpkg.com/nprogress#0.2.0/nprogress.css" rel="stylesheet" />
<script src="https://unpkg.com/nprogress#0.2.0/nprogress.js"></script>
Due to security reasons, my organization prefers to install NProgress as a node module and reference that rather than using CDN. How do I do that?
Try this npm install nprogress --save
Follow the link for more information
Hope it helps.
I want to add this above tag in index.html for SIT/sandbox environment, how can I do this?
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
I can't have an access process.env variables in index.html file, so that's why I am unable to do this.
EDIT FOR CLARIFICATION:
Is there any way to adapt the vue-cli (webpack) build process to add one specific <meta> tag to the index.html conditionally depending on the build profile? The <meta> tag should be appended during the build process, not on runtime with browser JavaScript.
Use a combination of:
Webpack and Vue-Cli environment variables
Lodash in the public/index.html which vue-cli uses as a template
So your public/index.html would have a lodash instruction where the robots content is:
<meta name="robots" content="<%= process.env.ROBOTS_META%>"/>
Then make a new file in the root of your project called .env which contains the text:
NODE_ENV=production
ROBOTS_META=
Then make a second file in the root of your project called .env.dev containing:
NODE_ENV=production
ROBOTS_META=noindex,nofollow
If you want your production build, run: vue-cli-service build and the .env is used
For your dev/test/staging environments, run: vue-cli-service build --mode dev and the .env.dev is used.
To read more about VueCli environment variables see here:
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
I am pretty new to Symfony and NPM, Composer etc. I set up my symfony project and installed Bootstrap 4 via NPM
npm install bootstrap
Now the bootstrap files are located in the "node_modules/bootstrap" folder.
How can I include this sources correctly in my base.html.twig?
<link href="{{ asset('node_modules/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
I don't know if that is the correct way. As I said, I am new to this.
You can use "import" in your js file to import css.
import 'bootstrap/dist/css/bootstrap.min.css';
https://reactstrap.github.io/
There is no CDN for React-art library. So, I installed it via npm install react-art in the local asp.net project.
In the cshtml file where I use the ReactART object, I used the following script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></Script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script>
<script src="..\..\node_modules\react-art\lib\reactart.js"></script>
But I can't get the reference to the ReactART object.
How can I consume react-art and it's dependencies?
You will need Browserify or Webpack to create js bundle with react-art. They both understand common.js require directive. Check out official example for more info.
When using Aurelia, I see the following for CSS.
import 'bootstrap/css/bootstrap.css!';
My questions is, can you configure it to support less files? Or do we need to run the preprocessor separately, converting our less files into css files first?
Thanks in advance.
I think your question is very broad, the answer depends on the solution you choose.
The get started page of Aerelia shows you how to integrate Bootstrap using jspm. Some source 1, 2 suggest to fork the Bootstrap repository on github and use this customized fork instead of the original with jspm. In the package.json fiile of your project replace Bootstrap with your own fork in the jspm dependencies, or run:
jspm install github:{username}/bootstrap#master
For the long term i expect that the above will cause you troubles with keeping your fork up to date. Also you will have to compile Bootstrap (local) and push your changes to github for every change.
Alternatively you can indeed download Bootstrap and add to Less compile task to the gulp build tasks of your project. As already suggested by #matthew-james-davis in the comments you can use Using SASS with Aurelia's Skeleton Navigation project to find out how to do this.
I suggest to use bower to locally install Bootstrap:
bower install bootstrap
The above will install bootstrap in the bower_components/bootstrap folder. Don't modify these files directly. Create a less/project.less:
#import "bootstrap";
// your custom code here
Notice that compiling Bootstrap requires the autoprefix css processor too. See also: http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/
So you gulp build task should look like that shown below:
var LessPluginCleanCSS = require('less-plugin-clean-css'),
LessPluginAutoPrefix = require('less-plugin-autoprefix'),
cleancss = new LessPluginCleanCSS({ advanced: true }),
autoprefix= new LessPluginAutoPrefix({ browsers: ["Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"] });
gulp.task('build-less', function() {
gulp.src('less/project.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [autoprefix, cleancss],
paths: [ path.join(__dirname, 'bower_components/bootstrap/less/') ]
}))
.pipe(sourcemaps.write(paths.sourceMapRelativePath))
.pipe(gulp.dest('css/'))
});
The above task should compile css/project.css you can reference this file in the index.html of your project:
<link rel="stylesheet" type="text/css" href="css/project.css">
You also will have to load Bootstrap Javascripts plugin. These plugin depends on jQuery. Link bootstrap.min.js from your bower_component folder.